Курс по Flexbox. Выравнивание элементов по поперечной оси


Содержание материала:

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Flexbox призван спасти нас от неприятных моментов чистого CSS (например, от вертикального выравнивания), и он отлично справляется со своей задачей. Но разобраться в принципах его работы порой бывает сложно, особенно, если вы новичок.

Основная задача Flexbox — сделать слои гибкими, а работу с ними — интуитивно понятными. Для достижения этой цели он позволяет контейнерам самим решать, как обращаться со своими дочерними элементами, в том числе изменять их размер и расстояние между ними.

Звучит неплохо, но давайте посмотрим, так ли оно гладко на практике. В этой статье мы изучим 9 самых популярных свойств Flexbox, разберемся, что они делают, и как они на самом деле работают.

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex . Однако flex-direction позволяет вращать главную ось.

Важно заметить, что flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

«Росбанк», Москва, до 60 000 ₽ (до налогов)

Выравнивание с помощью флексбоксов

Выравнивание является большой частью флексбоксов. Помимо обычных свойств выравнивания в CSS, есть свойства, которые были специально разработаны для флексбоксов.

Однако по мере развития спецификации стало ясно, что разные свойства выравнивания, разработанные специально для флексбоксов, также можно применять и к другим моделям. Таким образом, был создан новый модуль CSS, специально предназначенный для выравнивания блоков внутри их контейнеров при использовании блочной вёрстки, вёрстки таблиц, вёрстки флексами и вёрсти сетками.

Вот основные свойства из этой спецификации, которые связаны с флексбоксами.

Свойство align-items

Свойство align-items указывает значение align-self по умолчанию для всех флекс-элементов, участвующих в контексте форматирования флекс-контейнера.

В этом примере мы применяем align-items: center к флекс-контейнеру, поэтому все флекс-элементы выравниваются по центру оси блока.

Поскольку это настройка по умолчанию, любой из флекс-элементов может переопределить выравнивание с помощью свойства align-self .

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

Здесь у красного флекс-элемента задано значение flex-start , а у синего значение flex-end . Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Свойство justify-content

Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.

В этом примере мы используем значение space-between , что приводит к одинаковому промежутку между элементами, каждый из которых выровнен относительно своего края.

Свойство align-content

Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.

Свойство place-content

margin

Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.

Полное руководство по Flexbox

Введение

Модуль разметки Flexbox ( от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе « Возможная рекомендация » стандартизации W3C ( W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически ( вот почему его назвали «гибкий» ).

Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину ( и порядок ) его элементов для оптимального заполнения доступного пространства ( в основном для поддержки всех видов и размеров экранов ).

Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам ( блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).

И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости ( и это не игра слов ) для поддержки больших и сложных приложений ( особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее ).

Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.

Основные понятия и термины

Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру ( родительскому элементу, известному как flex-контейнер ), в то время как другие должны быть применены к дочерним элементам ( назовем их flex-элементы ).

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:

В основном, элементы будут размещены либо вдоль главной оси ( от точки main-start до main-end ), либо вдоль поперечной оси ( от точки cross-start до cross-end ):

  • main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction ( смотрите ниже );
  • main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
  • main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
  • cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
  • cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
  • cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:

Отметим, что CSS -столбцы ( columns ) не имеют эффекта во flex -контейнере.

flex-direction

Это свойство задает главную ось, определяющую направление, в котором размещаются flex -элементы во flex -контейнере. Flexbox ( за исключением опционального обертывания ) является концептом однонаправленной разметки.

Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:

  • row ( по умолчанию ): слева направо для ltr; справа налево для rtl;
  • row-reverse : справа налево для in ltr; слева направо для rtl;
  • column : так же как row , но сверху вниз;
  • column-reverse : так же как row-reverse , но снизу вверх.

flex-wrap

По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:

  • nowrap ( по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :

justify-content

Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex -элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:

  • flex-start (по умолчанию): элементы выравниваются к началу строки;
  • flex-end : элементы выравниваются к концу строки;
  • center : элементы выравниваются по центру строки;
  • space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
  • space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси ( перпендикулярной главной ):

  • flex-start : граница элементов cross-start располагается на линии cross-start ;
  • flex-end : граница элементов cross-start располагается на линии cross-end ;
  • center : элементы располагаются по центру поперечной оси;
  • baseline : выравнивание элементов происходит согласно базовой линии;
  • stretch ( по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер ( с учетом значений min-width/max-width ).

align-content

Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.

Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:

  • flex-start : строки располагаются в начале контейнера;
  • flex-end : строки располагаются в конце контейнера;
  • center : строки располагаются посередине контейнера;
  • space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
  • space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
  • stretch ( по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

По умолчанию, flex -элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex -контейнере:

flex-grow

Это свойство позволяет flex -элементу « разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.

Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:

Отрицательные числа недопустимы.

flex-shrink

Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:

Отрицательные числа недопустимы.

flex-basis

Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию ( или определенное свойством align-items ) для отдельных flex -элементов.

Доступные значения вы можете найти в описании свойства align-items :

Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.

Примеры

Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:

Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера ( для эстетичности ), но с возможностью автоматического заполнения.

Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо ( без использования медиа запросов ):

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:

Давайте попробуем сделать еще лучше, поиграв с « гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:

Использование префиксов для flexbox

Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.

А все потому, что спецификация flexbox менялась с течением времени, создав « old » ( старую ), « tweener «(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer , который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

Поддержка браузерами

Разделена « версиями » flexbox на:

  • ( new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex; ).
  • ( tweener ) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox; ).
  • ( old ) – означает поддержку старого синтаксиса от 2009 года (например, display: box; ).
Chrome Safari Firefox Opera IE Android iOS
21+ (new)
20- (old)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Данная публикация представляет собой перевод статьи « A Complete Guide to Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

Курс по Flexbox. Выравнивание элементов по поперечной оси

Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении лейаутов в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас?

Любой верстальщик знает несколько путей выровнять что-либо по вертикали или сделать 3-х колоночный макет с резиновой средней колонкой. Но давайте признаем, что все эти способы довольно странные, похожи на хак, подходят не во всех случаях, сложны для восприятия и не работают при несоблюдении определенных магических условий, которые сложились исторически.

Случилось так потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, затем стало модным верстать float-ами, а после официальной смерти ie6 добавились еще и приемы с inline-block. В итоге мы получили в наследство гремучую смесь всех этих приемов, используемую для построения лейаутов 99,9% всех существующих веб-страниц.

Топ-пост этого месяца:  Чаще всего россияне приобретают в интернете вещи и обувь

Спецификация CSS Flexible Box Layout Module (в народе Flexbox) призвана кардинально изменить ситуацию в лучшую сторону при решении огромного количества задач. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Основные преимущества flexbox

  1. Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
  2. Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
  3. Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки.
  4. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
  5. Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.
  6. Синтаксис CSS правил очень прост и осваивается довольно быстро.

Поддержка браузерами

Поддержка браузерами неполная . Виноват в этом в основном Internet explorer, который поддерживает спецификацию 2011 года только начиная с 10 версии, . Не смотря на это, я бы порекомендовал обратить внимание на обширность поддержки всеми остальными мобильными и десктопными браузерами! Тут все прекрасно. Если Вам нужна мобильная версия сайта или web-based приложение, то его уже можно (а, возможно, и нужно) делать, используя все преимущества flexbox!

Немного истории

  • 2008 – CSS Working Group обсуждает предложение “Flexible Box Model” на основе XUL (XML User Interface Language – язык разметки в приложениях Mozilla) and XAML (Extensible Application Markup Language – язык разметки в приложениях Microsoft).
  • 2009 – опубликован черновик “Flexible Box Layout Module”. Chrome и Safari добавляет частичную поддержку, пока Mozilla начинает поддерживать XUL-подобный синтаксис, известный как “Flexbox 2009″.
  • 2011 – Tab Atkins берется за развитие Flexbox и публикует 2 черновика. В этих черновиках синтаксис изменен значительно. Chrome, Opera и IE 10 внедряют поддержку этого синтаксиса. Он известен под названием “flexbox 2011”
  • 2012 – Синтаксис снова немного изменен и уточнен. Спецификация переходит в статус Candidate Recommendation и известна под названием “flexbox 2012”. Opera внедряет беспрефиксную поддержку, Chrome поддерживает текущую спецификацию с префиксами, а Mozilla без них, IE10 добавляет поддержку устаревающего “flexbox 2011” синтаксиса.
  • 2014 – все новые браузеры поддерживают последнюю спецификацию (включая IE 11)

Начинаем погружение

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex .

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.

  • Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
  • Поперечной осью называется направление, перпендикулярное главной оси.

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction .

flex-direction – направление главной оси

Доступные значения flex-direction:

  • row (значение по умолчанию) : слева направо (в rtl справа налево)
  • row-reverse : справа налево (в rtl слева направо)
  • column : сверху вниз
  • column-reverse : снизу вверх

justify-content – выравнивание по главной оси.

Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.

Доступные значения justify-content:

  • flex-start (значение по умолчанию) : блоки прижаты к началу главной оси
  • flex-end : блоки прижаты к концу главной оси
  • center : блоки располагаются в центре главной оси
  • space-between : первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.
  • space-around : все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.

align-items – выравнивание по поперечной оси.

Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.

Доступные значения align-items:

  • flex-start : блоки прижаты к началу поперечной оси
  • flex-end : блоки прижаты к концу поперечной оси
  • center : блоки располагаются в центре поперечной оси
  • baseline : блоки выровнены по их baseline
  • stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width / max-width , если таковые заданы.

СSS свойства flex-direction , justify-content , align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap .

Доступные значения flex-wrap:

  • nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
  • wrap : блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
  • wrap-reverse : то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути, flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap .

align-content

Существует также свойство align-content , которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse; )

Доступные значения align-content:

  • flex-start : ряды блоков прижаты к началу flex-контейнера.
  • flex-end : ряды блоков прижаты к концу flex-контейнера
  • center : ряды блоков находятся в центре flex-контейнера
  • space-between : первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
  • space-around : ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.
  • stretch (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны ( px , em , % , …) или auto (по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0 )

Пример 1:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1 , то они будут одинакового размера
  • Если один из них имеет flex-grow:2 , то он будет в 2 раза больше, чем все остальные

Пример 2:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
  • Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1 .

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items )

  • flex-start : flex-блок прижат к началу поперечной оси
  • flex-end : flex-блок прижат к концу поперечной оси
  • center : flex-блок располагаются в центре поперечной оси
  • baseline : flex-блок выравнен по baseline
  • stretch (значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width / max-width , если таковые заданы.

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order . Оно задается целым числом и по умолчанию равно 0 .

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

Вещи, которые следует помнить

  1. Не следует использовать flexbox там, где в этом нет необходимости.
  2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
  3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
  4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
  5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
  6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.).

В заключение

Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас.

CSS — Flexbox верстка

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

Назначение CSS Flexbox

CSS Flexbox предназначен для создания гибких макетов. С помощью этой технологии можно очень просто и гибко расставить элементы в контейнере, распределить доступное пространство между ними, и выровнять их тем или иным способом даже если они не имеют конкретных размеров.

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

Поддержка CSS Flexbox браузерами

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Элементы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .

После этого данный элемент становится flex-контейнером, а все его непосредственные дочерние элементы flex-элементами. При этом когда мы говорим о flexbox то подразумеваем только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Т.е. в CSS Flexbox всего 2 типа элементов: flex-контейнер и flex-элемент.

Структура flexbox сетки

Flex-элементы по умолчанию занимают всю высоту flex-контейнера.

Значение flex или flex-inline определяет то, как flex-контейнер будет представлен на странице. Если его необходимо представить как блок, то используйте значение flex . Если элемент необходимо представить как строчный, то используйте значение flex-inline . В этом случае он будет занимать столько места странице, сколько необходимо для отображения его элементов.

Направление выстраивания flex-элементов

Указание направления выстраивания flex-элементов внутри flex-контейнера осуществляется посредством осей.

CSS Flexbox — Направление осей по умолчанию

Во flexbox выделяют 2 оси. Первая ось называется основной или главной (по умолчанию направлена вправо). Вторая — поперечная (по умолчанию направлена вниз).

Элементы во flex-контейнере располагаются в одну линию (по умолчанию) даже тогда, когда им не хватает места. Выстраиваются flex-элементы в flex-контейнере по направлению основной оси.

Расположение элементов в контейнере по умолчанию (flex-элементы, которым не хватает места во flex-контейнере, вылезают за его пределы)

В CSS Flexbox разрешить перенос flex-элементов на новые линии (если им не хватает места в текущей линии) осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси.

Установка направления главной оси flexbox осуществляется с помощью CSS-свойства flex-direction .

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не горизонтально (строками), а вертикально (колонками).

CSS Flexbox — Расположение элементов при установке свойству flex-direction значения column, а flex-wrap — wrap

Свойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow :

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content :

Варианты выравнивания flex-элементов вдоль главной оси

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства align-items :

Варианты выравнивания flex-элементов вдоль поперечной оси

Выравнивание линий flex-контейнера

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

Варианты выравнивания линий flex-контейнера

Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse .

CSS-свойство align-self

Свойство align-self в отличие от предыдущих ( justify-content , align-items и align-content ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self может принимать такие же значения как align-items .

Как работает CSS свойство align-self

Изменение порядка следования flex-элементов

По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order . Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

Как работает CSS свойство order

Управление шириной flex-элемента

Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink , которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Как работает CSS свойство flex-grow

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

  • к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
  • к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).


Другими словами, CSS свойство flex-grow позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Как работает CSS свойство flex-shrink

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( .flex-container_element-1 и .flex-container_element-2 ). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.

CSS-свойство flex

Для удобной установки flex-grow , flex-shrink и flex-basis можно использовать CSS свойство flex .

Значение по умолчанию:

Верстка макета страницы на CSS Flexbox

В этом разделе создадим простой адаптивный макет на Flexbox.

Структура макета будет состоять из 3 секций:

  • header (для вывода заголовка и основного меню);
  • main (для отображения основной части);
  • footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально ( max-width .

Для «превращения» блока во flex-контейнер будем использовать класс row-flex . Установку ширины каждому flex-элементу ( main_article и main_aside ) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex .

Макет веб-страницы на Flexbox

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article «Интересненькое на сайте».

Топ-пост этого месяца:  Индивидуальность сайта

Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).

#2 — Свойства Flexbox: flex-direction, justify-content и align-items. Главная и поперечная оси flex-контейнера

Приветствуем всех на втором видеоуроке курса Flexbox CSS3. Сегодняшний урок посвятит вас в тайны такого понятия, как оси во Flexbox, познакомит вас с некоторыми свойствами flex-контейнера. Оси – это главное во Flexbox, потому как именно с их помощью вы сможете “рулить” размещением flex-элементов. И если вы поймете, как ими управлять – полдела уже сделано! Этим сегодня мы и займемся.

Главная и поперечная оси flex-контейнера

Каждый flex-контейнер имеет две оси, вдоль которых располагаются flex-элементы в зависимости от заданных значений свойств flex-контейнера. Одна из осей — главная — по умолчанию имеет направление слева направо. Вторая ось flex-контейнера — поперечная. Она всегда перпендикулярна главной и по умолчанию имеет направление сверху вниз. Все flex-элементы внутри flex-контейнера растягиваются по дефолту по высоте поперечной оси.

Главные свойства flex-контейнера

Все свойства Flexbox подразделяются на два типа: свойства flex-контейнера и свойства flex-элементов.На сегодняшнем видеоуроке вы изучите три главных свойства flex-контейнера.

Flex-direction — свойство flex-контейнера

Первое свойство, с которым вы познакомитесь на этом видеоуроке — это свойство flex-контейнера — flex-direction. Свойство flex-direction отвечает за направление главной оси. Оно имеет четыре значения:

  • 1) row (дефолтное),
  • 2) column (сверху вниз),
  • 3) row-reverse (справа налево),
  • 4) column-reverse (снизу вверх).

Все flex-элементы выстраиваются вдоль главной оси в соответствии со значением свойства flex-direction, т.е. в соответствии с ее направлением и по дефолту прижимаются к ее началу.

Стоит отметить очень важную особенность поперечной оси. Главной оси мы можем задавать любое направление, поперечная же свое направление никогда не меняет. Если главная ось расположена горизонтально независимо от направления, то поперечная всегда направлена сверху вниз. А если главная занимает вертикальное положение и при этом направлена либо вниз, либо вверх, то поперечная всегда имеет направление слева направо.

Justify-content — свойство flex-контейнера

Следующим свойством flex-контейнера, рассматриваемым на сегодняшнем видеоуроке, будет свойство justify-content. Свойство justify-content несет ответственность за расположение flex-элементов вдоль главной оси. У justify-content 5 значений:

  • 1) flex-start (дефолтное, flex-элементы прижимаются к началу главной оси),
  • 2) flex-end (элементы прижимаются к концу главной оси),
  • 3) center (flex-элементы располагаются в центре главной оси),
  • 4) space-between (элементы распределяются равномерно вдоль главной оси без отступов по краям),
  • 5) space-around (элементы также распределяются равномерно, но каждый отступ от края оси равен половине отступа между элементами).

Align-items — свойство flex-контейнера

Последним свойством, о котором вы узнаете на этом видеоуроке, будет свойство flex-контейнера — align-items. Значения свойства align-items определяют расположение flex-элементов вдоль поперечной оси. Всего их пять:

  • 1) stretch (дефолтное, элементы растягиваются по высоте поперечной оси);
  • 2) flex-start (элементы прижимаются к началу поперечной оси);
  • 3) flex-end (элементы прижимаются к концу поперечной оси);
  • 4) center (элементы устанавливаются по центру поперечной оси);
  • 5) baseline (отвечает за выравнивание flex-элементов относительно их базовой линии).

Вот такие свойства Flexbox будут изучены на этом видеоуроке. После просмотра следующего занятия вы сможете задавать ряды при помощи свойств Flexbox, выравнивать их и управлять ими. Ждем вас с нетерпением на третьем видеоуроке.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Про CSS

Flexbox

Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.

UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

Это означает, что технологию нельзя широко использовать прямо сейчас, но уже самое время познакомиться с ней поближе.

Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.

Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

Приготовим полигон для экспериментов:

Один родительский блок (желтый) и 5 дочерних.

Display: flex

И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

Если родительский блок содержит картинки или текст без оберток, они становятся анонимными flex-элементами.

Свойство display для Flexbox может принимать два значения:

flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

Flex-direction

Направление раскладки блоков управляется свойством flex-direction .

row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

row и row-reverse

column и column-reverse

Flex-wrap

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse :

Order

Для управления порядком блоков служит свойство order .

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

Justify-content

Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

justify-content отвечает за выравнивание по главной оси.

Возможные значения justify-content :

flex-start — элементы выравниваются от начала главной оси (значение по умолчанию); flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

flex-start и flex-end

Align-items

align-items отвечает за выравнивание по перпендикулярной оси.

Возможные значения align-items :

flex-start — элементы выравниваются от начала перпендикулярной оси; flex-end — элементы выравниваются от конца перпендикулярной оси; center — элементы выравниваются по центру; baseline — элементы выравниваются по базовой линии; stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

Align-self

align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

Возможные значения align-self :

auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

Align-content

Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

flex-start — элементы выравниваются от начала главной оси; flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя; stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).

Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

Элементы стоят столбиком, но не переносятся:

Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

Думаю, со временем заработает.

UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

Frontender Magazine

Модуль Flexbox-лейаута (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.

Самое важное, flexbox-лейаут не зависит от направления в отличие от обычных лейаутов (блоки, располагающиеся вертикально, и инлайн-элементы, располагающиеся горизонтально). В то время, как обычный лейаут отлично подходит для веб-страниц, ему не хватает гибкости (никакого каламбура) для поддержки больших или сложных приложений (особенно когда дело доходит до смены ориентации экрана, изменения размера, растягивания, сжатия и т.п.).

Замечание: Flexbox-лейаут лучше всего подходит для составных частей приложения и мелкомасштабных лейаутов, в то время как Grid-лейаут больше используется для лейаутов большого масштаба.

Основы

Т.к. flexbox — это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.

Если обычный лейаут основывается на направлениях потоков блочных и инлайн-элементов, то flex-лейаут основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-лейаутов.

В основном элементы будут распределяться либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end).

  • main-axis — главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства flex-direction (см. ниже).
  • main-start | main-end — flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
  • main size — ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
  • cross axis — поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
  • cross-start | cross-end — flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end .
  • cross size — ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

Свойства

display: flex | inline-flex;

Применяется к: родительскому элементу flex-контейнера.

Определяет flex-контейнер (инлайновый или блочный в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

  • CSS-столбцы columns не работают с flex-контейнером
  • float , clear и vertical-align не работают с flex-элементами

flex-direction

Применяется к: родительскому элементу flex-контейнера.

Устанавливает главную ось main-axis , определяя тем самым направление для flex-элементов, размещаемых в контейнере.

  • row (по умолчанию): слева направо для ltr , справа налево для rtl ;
  • row-reverse : справа налево для ltr , слева направо для rtl ;
  • column : аналогично row , сверху вниз;
  • column-reverse : аналогично row-reverse , снизу вверх.

flex-wrap

Применяется к: родительскому элементу flex-контейнера.

Определяет, будет ли контейнер однострочным или многострочным, а также направление поперечной оси, определяющей направление, в котором будут располагаться новые строки.

  • nowrap (по умолчанию): однострочный / слева направо для ltr , справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr , справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr , слева направо для rtl .

flex-flow

Применяется к: родительскому элементу flex-контейнера.

Это сокращение для свойств flex-direction и flex-wrap , вместе определяющих главную и поперечную оси. По умолчанию принимает значение row nowrap .

justify-content

Применяется к: родительскому элементу flex-контейнера.

Определяет выравнивание относительно главной оси. Помогает распределить оставшееся свободное место в случае, когда элементы строки не «тянутся», либо тянутся, но уже достигли своего максимального размера. Также позволяет в некотором роде управлять выравниванием элементов при выходе за границы строки.

  • flex-start (по умолчанию): элементы сдвигаются к началу строки;
  • flex-end : элементы сдвигаются к концу строки;
  • center : элементы выравниваются по центру строки;
  • space-between : элементы распределяются равномерно (первый элемент в начале строки, последний — в конце);
  • space-around : элементы распределяются равномерно с равным расстоянием между собой и границами строки.

align-items

Применяется к: родительскому элементу flex-контейнера.

Определяет поведение по умолчанию для того, как flex-элементы располагаются относительно поперечной оси на текущей строке. Считайте это версией justify-content для поперечной оси (перпендикулярной к основной).

  • flex-start : граница cross-start для элементов располагается на позиции cross-start ;
  • flex-end : граница cross-end для элементов располагается на позиции cross-end ;
  • center : элементы выравниваются по центру поперечной оси;
  • baseline : элементы выравниваются по своей базовой линии;
  • stretch (по умолчанию): элементы растягиваются, заполняя контейнер (с учётом min-width / max-width ).

align-content

Применяется к: родительскому элементу flex-контейнера.

Выравнивает строки flex-контейнера при наличии свободного места на поперечной оси аналогично тому, как это делает justify-content на главной оси.

Замечание: это свойство не работает с однострочным flexbox.

  • flex-start : строки выравниваются относительно начала контейнера;
  • flex-end : строки выравниваются относительно конца контейнера;
  • center : строки выравниваются по центру контейнера;
  • space-between : строки распределяются равномерно (первая строка в начале строки, последняя — в конце);
  • space-around : строки распределяются равномерно с равным расстоянием между собой;
  • stretch (по умолчанию): строки растягиваются, заполняя свободное пространство.

order

Применяется к: дочернему элементу / flex-элементу.

По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.

flex-grow

Применяется к: дочернему элементу / flex-элементу.

Определяет для flex-элемента возможность «вырастать» при необходимости. Принимает безразмерное значение, служащее в качестве пропорции. Оно определяет, какую долю свободного места внутри контейнера элемент может занять.

Если у всех элементов свойство flex-grow задано как 1 , то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2 , то он заберёт в два раза больше места, чем другие.

Отрицательные числа не принимаются.

flex-shrink

Применяется к: дочернему элементу / flex-элементу.

Определяет для flex-элемента возможность сжиматься при необходимости.

Отрицательные числа не принимаются.

flex-basis

Применяется к: дочернему элементу / flex-элементу.

Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

Применяется к: дочернему элементу / flex-элементу.

Это сокращение для flex-grow , flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink , flex-basis ) необязательны. Значение по умолчанию — 0 1 auto .

align-self

Применяется к: дочернему элементу / flex-элементу.

Позволяет переопределить выравнивание, заданное по умолчанию или в align-items , для отдельных flex-элементов.

Обратитесь к описанию свойства align-items для лучшего понимания доступных значений.

Примеры

Начнём с очень-очень простого примера, встречающегося практически каждый день: выравнивание точно по центру. Нет ничего проще, если использовать flexbox.

Этот пример основывается на том, что margin во flex-контейнере, заданный как auto , поглощает лишнее пространство, поэтому задание отступа таким образом выровняет элемент ровно по центру по обеим осям.

Теперь давайте используем какие-нибудь свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера всё выглядело хорошо (без @media -запросов!).

Готово. Всё остальное — уже дело оформления. Ниже размещён CodePen, демонстрирующий этот пример. Обязательно попробуйте растянуть/сжать окно браузера и посмотрите, что произойдёт.

Давайте попробуем что-нибудь ещё. Представьте, что нам нужна выровненная по правому краю навигация в самом верху нашего сайта, но мы хотим, чтобы она выравнивалась по центру для экранов среднего размера и превращалась в один столбец на маленьких. Всё достаточно просто.

Давайте попробуем кое-что получше и поиграем с гибкостью flex-элементов! Как насчёт ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

Похожие свойства

Другие ресурсы

Поддержка браузерами

  • (modern) означает поддержку нового синтаксиса из спецификации ( display: flex; )
  • (hybrid) означает поддержку старого неофициального синтаксиса из 2011 ( display: flexbox; )
  • (old) означает поддержку старого синтаксиса из 2009 ( display: box; )
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Для более подробной информации о том, как и когда использовать различные синтаксисы для обеспечения лучшей поддержки браузерами, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).

Верстка по Flexbox (работа с элементами).

В этой cтатье мы с Вами продолжим изучать вопросы, касающиеся современной нативной верстки страниц сайта с помощью каскадных таблиц стилей с использованием модели Flexbox.

В предыдущей статье мы научились работать и производить всевозможные настройки флекс контейнеров с использованием современных CSS свойств, но этого недостаточно для того, чтобы решать многие задачи, связанные с версткой сайта.

Сейчас мы рассмотрим методы работы непосредственно с флекс элементами, научимся определять порядок их отображения в контейнере, научимся вертикально выравнивать конкретный флекс элемент, рассмотрим как указать относительную ширина флекс элемента, ширину флекс элемента по умолчанию и еще некоторые необходимые приемы работы с флекс элементами.

Порядок следования элементов

В этом разделе мы с Вами рассмотрим как с использованием Flexbox верстки задать порядок следования элементов внутри родительского элемента, что позволит простым способом решать сложные казалось бы задачи. CSS свойство order позволяет установлить порядок следования флекс элемента в контейнере относительно остальных.

Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство order , и любые свойства, предназначенные для работы с флекс элементами не окажут на такие элементы никакого эффекта.

Обращаю Ваше внимание, что если вы указываете значение свойства order для одного флекс элемента в контейнере, то это не будет являться его порядковым номером, а указывает только на «вес» его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

Схематичное отображение работы свойства order отображено на следующем изображении:

Рис. 218 Схематичное отображение работы CSS свойства order

В этом учебнике мы уже неоднократно сталкивались со свойством z-index , благодаря которому, вы можете управлять видимостью элементов по оси z, принцип указания значений свойства order аналогичен. Вы можете использовать в своей работе любые значения, которые будут вам интуитивно понятны, например, 100, 200, 300 и тому подобные.

Перейдем к рассмотрению примера:

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по пять элементов

  • Для элемента в первом контейнере значение -1, что позволяет сместить элемент к левому краю родительского контейнера относительно остальных элементов, которые по умолчанию имеют значение свойства order .
  • Для элемента во втором контейнере значение 1, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов.
  • Для элемента в третьем контейнере значение 2, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов. Еще раз обращаю Ваше внимание, что значение не является его порядковым номером, мы могли указать значение 100, 200, 500, элемент не изменит своей позиции так как другие элементы в контейнере имеют значение этого свойства равное .

Пример изменения следования элементов в колоннах.

В следующем примере мы рассмотрим как происходит изменение следования элементов внутри колонн:

В этом примере мы установили, что элементы внутри блочного флекс контейнера отображаются вертикально как колонны, формируясь сверху вниз (свойство flex-direction со значением column ). В этом случае свойство order будет определять порядок следования элементов сверху вниз (элементы с меньшим номером будут отображаться выше, а с большим соответственно ниже).

Для первого элемента

Кроме того, мы указали, что при наведении на контейнер указателем мыши мы изменяем формирование колонны с сверху вниз на снизу вверх (свойство flex-direction со значением column-reverse ). Обратите внимание, что в этом случае порядок следования элементов в колоннах изменяется на противоположный. Вы можете открыть пример в отдельном окне для демонстрации.

Пример изменения следования элементов в колоннах

Вертикальное выравнивание флекс элемента

В предыдущей cтатье «Верстка по Flexbox. Часть 1.» мы с Вами рассмотрели как можно произвести выравнивание всех элементов внутри флекс контейнера. Но как быть, если какой то флекс элемент необходимо выровнять по особенному? На помощь нам приходит свойство align-self , которое задает выравнивание отдельных элементов строки внутри флекс контейнера. Кроме того, это свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу.

Обращаю Ваше внимание, что если для флекс элемента установлено свойство margin (внешние отступы) со значением auto , то свойство align-self будет игнорировано.

Схематичное отображение работы свойства align-self отображено на следующем изображении:

Рис. 221 Схематичное отображение работы свойства align-self

Перейдем к рассмотрению примера:

В этом примере мы создали блочный флекс контейнер, внутри которого мы разместили пять элементов

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self .

Для первого элемента

Для второго элемента

Третий элемент располагается в начале строки флекс контейнера (начало поперечной оси), а четвертый располагается в конце строки флекс контейнера (конец поперечной оси).

Пятый флекс элемент располагается по его базовой линии строки флекс контейнера.

Рис. 222 Пример использования свойства align-self

Увеличение относительной ширины флекс элемента

Следующая полезная особенность Flexbox это возможность не производя каких-либо вычислений указывать относительную ширину для флекс элементов, а не абсолютную (в единицах измерения CSS), или в процентном соотношении. Например, если внутри флекс контейнера для одного элемента будет указано, что его ширина будет в два раза больше по отношению к остальным элементам, и если мы добавим в контейнер еще один блок, то при этом ширина контейнера не изменится, а элемент по прежнему останется в два раза больше остальных, при этом ширина всех блоков пропорционально уменьшится.

Определить на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере доступно с помощью свойства flex-grow .

Обращаю Ваше внимание на то, что отрицательные значения свойства flex-grow не допускаются. Значение по умолчанию 0 — элементы не будут увеличиваться.

Перейдем к рассмотрению примера:

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

В первом контейнере второй элемент будет увеличен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре. Обратите внимание, как пропорцианально изменятся ширина элементов, не прибегая с нашей стороны к каким-либо расчетам, или использованию дополнительных функций.

Рис. 223 Пример использования свойства flex-grow

Размер флекс элемента по умолчанию

В предыдущем разделе мы с Вами рассмотрили как можно установить для флекс элементов относительную ширину по отношению к другим флекс элементам. В этом разделе мы рассмотрим еще одно свойство для работы с шириной флекс элемента. Свойство flex-basis позволит нам определить размер для флекс элемента, установленный по умолчанию перед тем как пространства внутри флекс контейнера будет распределено между другими элементами.

В отличии от свойства flex-grow используются как абсолютные значения (px, em, pt и так далее), так и значения в процентах, а не относительные значения, при этом отрицательные значения не допускаются. Значением по умолчанию является значение auto (размер равен размеру флекс элемента). Если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания флекс элемента.

Это свойство чем то похоже, на свойство определяющее минимальную ширину элемента (min-width), но в отличии от него свойство flex-grow не вызывает переполнение родительского элемента в том случае, если минимальный размер будет превышать размеры родительского элемента, а пропорционально уменьшает размер элемента. Другими словами это свойство определяет минимальный размер флекс элемента, который при необходимости может быть уменьшен, или увеличен.

Перейдем к рассмотрению примера:

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

В первом контейнере указали для второго флекс элемента размер по умолчанию 100px, во втором контейнере 100px, а в третьем уже 10000px. Обратите внимание, что в третьем контейнере элемент не смотря на его размеры не вызвал переполнение, а подстроился под оставшееся в родительском контейнере пространство.

Рис. 224 Пример использования свойства flex-basis

Уменьшение относительной ширины флекс элемента

Ранее мы с Вами рассмотрели как с помощью свойства flex-grow указать относительную ширину для флекс элементов и определить на сколько элемент может увеличиться по отношению к остальным флекс элементам. В CSS доступно и другое поведение для флекс элементов, при котором флекс элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). За эту возможность отвечает свойтво flex-shrink .

Значение, определяющее на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства) задается по аналогии со свойством flex-grow , но при этом значением по умолчанию будет 1, а не 0. Отрицательные значения так же не допускаются (не валидны).

Свойство flex-shrink со значением 0 определяет, что элемент не будет сжиматься, сохраняя при этом необходимую ширину элемента! Если вместе с этим значением указано минимальное значение ширины флекс элемента по умолчанию (свойство flex-basis ), то элемент не сможет уменьшиться меньше этого значения. Используйте эту возможность осмысленно, так как существует вероятность переполнения содержимого флекс контейнера. Этот момент мы рассмотрим в конце статьи

Перейдем к рассмотрению примера:

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

С использованием псевдокласса :nth-of-type() указали для каждого второго элемента в контейнерах различные значения свойства flex-shrink . В первом контейнере второй элемент при недостатке пространства будет уменьшен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре и всё это проиходит автоматически, не прибегая с нашей стороны к каким-то усилиям.

Рис. 225 Пример использования свойства flex-shrink

Универсальное свойство flex

CSS свойство flex является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличиться и уменьшиться по отношению к остальным флекс элементам в одном контейнере, а именно:

  • flex-grow (значение по умолчанию 0 ).
  • flex-shrink (значение по умолчанию 1 ).
  • flex-basis (значение по умолчанию auto ).

Обратите внимание на некоторые нюансы использования свойства flex :

  • Если указывается одно числовое значение, то оно устанавливается для свойства flex-grow , если указаны единицы измерения CSS, то соответственно для flex-basis .
  • Если второе значение соответствует числовому значению, то оно устанавливается для flex-shrink , а если указаны единицы измерения CSS, то для flex-basis .

Перейдем к рассмотрению примера:

В этом примере мы:

  • Разместили элемент вверху страницы и внизу страницы, указали для них высоту равную 100 пикселям и определенный цвет заднего фона.
  • Элементу

Рис. 226 Пример использования свойства flex

Изучаем Flexbox

Технологии не стоят на месте и мир высоких технологий развивается очень быстро. Тяжело успевать за техническим прогрессом и быть в курсе всех изменений.

Сегодня мы будем изучать долгожданное нововведение всех вебмастеров — Flexbox-лейаут или гибкие блоки.

Этот модуль призван сделать более эффективным верстку при выравнивании и распределении свободного пространства между элементами в контейнере, даже если их размер неизвестен или меняется динамически.

Начнем разбираться по порядку.

Для просмотра этой статьи и использования этих технологий, используйте современные браузеры

Поддержка браузерами: Google Chrome 21+, Opera 12.1+, Mozilla FireFox 22+, IE 10+, Safari 3+, Android 2.1+, iOS 3.2+.

Создадим простую структуру:

1 контейнер и 3 дочерних элемента. С этими элементами мы будем выполнять все манипуляции. Структура изменяться не будет, поэтому в дальнейшем буду приводить изменения только стилей css.

Итак, сейчас у нас все элемента блочные и без стилей все дочерние элементы будут располагаться друг под другом.

display:flex

Применяется к родительскому элементу. Определяет родительский элемент как блочный.

Поэтому добавим базовые стили, которые определят, что используемые нами элементы относятся к теме статьи:

В результате мы получим вот такую картинку:

При этом контейнер будет занимать всю доступную ширину (так как свойство display:flex определяет элемент как блочный) — для примера, ограничил ширину — 760px, а дочерние элементы занимают ширину по содержимому.

Если мы зададим родителю свойство display:inline-flex, то это определит родителя как блок-инлайновый элемент (при этом результат не изменится), родитель будет занимать ширину по содержимому (а вести себя как display:inline-block).

По умолчанию, дочерние элементы располагаются у левого края. Но это можно изменить:

Теперь элементы располагаются справа-налево. И первый дочерний элемент стоит справа. (Если направление текста изменено для всех страницы на обратное — справа налево rtl, вместо ltr — то все свойства выравнивания — это и далее — работают наоборот).

flex-direction

Применяется к родительскому элементу. Устанавливает направление дочерних flex элементов.

Все доступные варианты выравнивания для свойства flex-direction:

  • row (по умолчанию): слева направо для ltr, справа налево для rtl
  • row-reverse: справа налево для ltr, слева направо для rtl
  • column: аналогично row, сверху вниз
  • column-reverse: аналогично row-reverse, снизу вверх

display:inline-flex

Применяется к родительскому элементу. Определяет родительский элемент как инлайн-блочный (аналог inline-block).

На картинке наглядно видна разница между display:flex и display:inline-flex на основе свойства flex-direction. Больше к этим свойствам обращаться не будем.

flex-wrap

Применяется к родительскому элементу. Определяет контейнер как однострочный или многострочный, а также направление расположения строк.

Все доступные варианты выравнивания для свойства flex-wrap:

  • nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl
  • wrap: многострочный / слева направо для ltr, справа налево для rtl
  • wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl

Зададим стили для примера:

Это свойство указывает, что если контейнеры не будут умещаться на экране, то они перенесутся на другую строку.

Применим свойство flex-wrap:wrap-reverse;:

flex-flow

Применяется к родительскому элементу. Служит сокращением для flex-direction и flex-wrap.

Значение по умолчанию: flex-flow:row nowrap;

justify-content

Применяется к родительскому элементу. Определяет выравнивание дочерних элементов внутри родителя. Помогает распределить свободное пространство в случае, когда элементы строки не тянутся, либо достигли своего максимального размера.

Все возможные значения для свойства:

  • flex-start (по умолчанию): элементы сдвигаются к началу строки
  • flex-end: элементы сдвигаются к концу строки
  • center: элементы выравниваются по центру строки
  • space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
  • space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки

Зададим свойства для выравнивания элементов по центру:

align-items

Применяется к родительскому элементу. Выравнивает дочерние элементы по вертикали. Свойство работает аналогично justify-content, но перпендикулярно.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-w >

Внимание! Для примера немного добавились стили:

align-content

Применяется к родительскому элементу. Свойство не работает с однострочным flexbox. Определяет выравнивание строк (аналогично свойству justify-content).

Все возможные значения свойства:

  • flex-start: строки выравниваются относительно начала контейнера
  • flex-end: строки выравниваются относительно конца контейнера
  • center: строки выравниваются по центру контейнера
  • space-between: строки распределяются равномерно (первая строка в начале строки, последняя — в конце)
  • space-around: строки распределяются равномерно с равным расстоянием между собой
  • stretch (по умолчанию): строки растягиваются, заполняя свободное пространство

Обновим стили для примера:

Это все свойства, которые применяются к родителю. Теперь разберем свойства, которые применяются к дочерним элементам.

order

Применяется к дочерним элементам. Определяет порядок расположения элементов (можно изменить исходный порядок расположения в контейнере).

Вуаля! Первый элемент стал последним.

flex-grow

Применяется к дочерним элементам. Принимает безразмерное значение, которое означает пропорцию, которую дочерний элемент занимает внутри родителя.

Если у всех дочерних элементов задано: flex-grow:1;, то они займут одинаковый размер (или 33,3333%). Если один из элементов будет иметь значение 2, то он будет занимать размер в 2 раза больше остальных.

Первый элемент занимает в 2 раза больше места, чем другие.

flex-shrink

Применяется к дочерним элементам. Определяет возможность элементов сжиматься при необходимости.

По умолчанию значение 1. Отрицательные числа не принимаются. 0 — элемент не сжимается.

Несмотря на то, что дочерние элементы имеют одинаковый размер, в примере 2 последних блока будут сжиматься в 5 раз быстрее первого.

flex-basis

Применяется к дочерним элементам. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере (что-то похожее на width).

По умолчанию значение default auto. Принимает значение ширины (px, em и другие).

В представленном примере все блоки имеют одинаковую начальную ширину — 200px.

Применяется к дочерним элементам. Сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры не обязательны.

Значения по умолчанию: 0 1 auto.

В приведенном примере дочерние элементы имеют ширину по содержимому.

align-self

Применяется к дочерним элементам. Позволяет переопределить выравнивание, заданное в align-items для отдельных элементов.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)

Обновим стили. Зададим другое выравнивание первому элементу:

В приведенном примере — первый блок находится в начале родительского, а второй и третий выравнены по центру.

Ну и в заключение приведу пример, в которой в строку будут стоят 3 блока. Первый блок будет 200px, сжиматься и растягиваться не будет. Остальные 2 блока будут занимать все оставшееся пространство, причем как растягиваться так и сжиматься. Без flexbox это сделать достаточно проблематично. Посмотрим на код css при использовании flexbox:

Вот и все! Обзорная экскурсия по flexbox закончена. Экспериментируйте и все получится!

Топ-пост этого месяца:  Оптимизация PHP – основы для начинающих разработчиков
Добавить комментарий