Практическое применение flexbox. Полезные ссылки по Flex

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

Для чего нужен Flexbox?

Разработчики на протяжении долгого времени использовали таблицы, float-элементы, inline-block и другие CSS свойства, чтобы придать блокам нужное расположение. Однако ни один из вышеперечисленных инструментов не был предназначен для создания сложных страниц и приложений, которые в настоящее время используются почти в каждом проекте. Простые вещи, как вертикальное центрирование, осуществлялись достаточно сложно. Создание же макета на основе жидких сеток вообще считается верхом профессионализма, вот почему широкое распространение получили CSS-фреймворки на основе сеток. Итак, если множество проектов часто используют жидкие сетки, блоки одинаковой высоты, вертикальное центрирование блоков и т.д., то возникает вопрос: "Почему до сих пор нет свойства, которе позволило бы осуществлять эти вещи быстро и просто?"

Целью Flexbox является решение всех этих проблем!

Статус спецификации и поддержка браузерами

Модель flexbox разрабатывается уже четвёртый год. Браузеры используют разные экспериментальные версии спецификации. В сентябре 2012 года 3-я проверка ситаксиса Flexbox группой разработчиков из W3C достигла статуса W3C Candidate. Это означает, что W3C утверждает текущий синтаксис и даёт добро на использование вендорных префиксов браузерами.

История изменений спецификации по Flexbox:

• Июль 2009 Working Draft (display: box;)
• Март 2011 Working Draft (display: flexbox;)
• Ноябрь 2011 Working Draft (display: flexbox;)
• Март 2012 Working Draft (display: flexbox;)
• Июнь 2012 Working Draft (display: flex;)
• Сентябрь 2012 Candidate Recommendation (display: flex;)

Браузеры получили быструю поддержку Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 уже поддерживают Flexbox. Я рекомендую использовать один из этих браузеров для просмотра примеров.

Концепция и терминология

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

Модель Flexbox включает в себя flex-контейнер (flex container) и flex-пункты (flex items). Flex container должен иметь свойство display со значением flex или inline-flex . Со значением flex контейнер представляет из себя блочный элемент, а с inline-flex - строчный (инлайновый).

Пример объявления flex container:

Flex-container { display: -webkit-flex; display: flex; }

Flex container является родителем по отношению к flex items. Flex-пунктов может быть сколько угодно. Всё что находится вне flex-контейнера и внутри flex-пунктов отображается как обычно. Таким образо, Flexbox определяет, как flex-пункты будут расположены внутри flex-контейнера.

Flex items расположены внутри flex container вдоль flex line (flex линии). По умолчанию во flex-контейнере присутствует только одна flex-линия. Вот пример с двумя пунктами, расположенными по умолчанию вдоль flex-линии слева направо:

​

Flex-container{ display: -webkit-flex; display: flex; width: 700px; background-color: green; margin: 20px auto; } .flex-item{ background-color: red; width: 100px; height: 100px; margin: 5px; color: #fff; }

Writing modes (режимы отображения содержимого)

Важной частью настройки flexbox является изменение направления flex-линии. По умолчанию направление flex-линии совпадает с направлением текста: слева направо, сверху вниз.

В спецификации появился новый модуль writing modes. Он позволяет менять направление текста справа налево, или даже вертикально.

Данный модуль находтся в стадии разработки, но Chrome поддерживает CSS свойство direction. Если в предыдущем примере установить свойство direction: rtl (справа налево), то изменится не только направление отображения содержимого справа налево, но и direction flex-линии, что приведет к изменению макета.

Body { direction: rtl; } .flex-container { display: -webkit-flex; display: flex; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

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

Главная и поперечная оси

Чтобы не зависеть от режима отображения содержимого direction, Flexbox использует концепцию главной оси и поперечной оси (Main Axis и Cross Axis). Flex-линия следуют по главной оси. Поперечная ось перпендикулярна главной оси. Имена начальных и конечных точек, а также направления каждой оси:

• Main Start
• Main End
• Main Direction (иногда называется Flow Direction)
• Cross Start
• Cross End
• Cross Direction

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

Свойства Flex контейнера:

Flex-direction

Свойство flex-direction позволяет менять оси flex-контейнера. По умолчанию свойство flex-direction имеет значение row. В этом случае flex-пункты располагаются в соответствии с режимом writing-mode. Еще раз напомним, что это означает направление слева направо, сверху вниз (по умолчанию).

Другие возможные значения:

• row-reverse : Main Start И Main End меняются местами. Если даже writing-mode указан ltr (слева налево), то flex-пункты все равно будут расположены справа налево.
• column : Главная ось и поперечная ось меняются местами. Если режим отображения содержимого горизонтальный, то flex-пункты все равно будут располагаться вертикально.
• column-reverse : аналогично column только обратный.

Изменим в предыдущем примере свойство flex-direction на column :

Flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

Теперь flex-пункты располагаются вертикально.

justify-content

justify-content регулирует расположение flex-пунктов по главной оси. Возможные значения:

• flex-start (по умолчанию)
• flex-end
• center
• space-between
• space-around

Рассмотрим пример с justify-content: center чтобы flex-пункты центрировались по главной оси:

Flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

flex-start , flex-end , и center работают, соединившись вместе по главной оси. А вот space-between и space-around распределяют свободное пространство между flex-пунктами определённым способом. Приведу диаграмму из спецификации, которая показывает распределение justify-content :

​

align-items

align-items является дополнительным свойством к justify-content . align-items регулирует отображение flex-пунктов относительно перпендикулярной оси. Возможные значения:

• flex-start (по умолчанию)
• flex-end
• center
• baseline
• stretch

Рассмотрим примение свойства align-items:center , которе позволяет flex-пункты вертикально центрировать относительно перпендикулярной оси:

Flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

Итак, flex-start , flex-end , и center всегда располагаются соединившись вместе. Значение stretch довольно простое: оно заставляет flex-пункты растягиваться от Cross Start до Cross End, то есть по вертикали относительно flex-контейнера. baseline заставляет flex-пункты располагаться по базовой линии. Базовая линия вычисляется исходя из инлайнового содержимого flex-пунктов. Вот лучшее объяснение работы данных значений:

​

Flex-wrap

Во всех рассмотренных примерах flex-контейнер имел одну flex-линию. Использование свойства flex-wrap позволит создать flex-контейнер с разным количеством flex-линий. Возможные значения:

• nowrap (по умолчанию)
• wrap-reverse

Если во flex-wrap установлено значение wrap , то во flex-пункты включаются дополнительные flex-линии, но только в том случае, если flex-пунктам не хватает пространства для расположения на одной flex-линии. Дополнительные flex-линии добавляются в направлении перпендикулярной оси.

Пример использования flex-wrap :

Flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; }

Значение wrap-reverse аналогично значению wrap за исключением того, что новые flex-линии добавляются в обратном направлении по перпендикулярной оси.

align-content

align-content изменяет поведение свойства flex-wrap . Это значение аналогично align-items только вместо выравнивания flex-пунктов, оно выравнивает flex-линии. Как и можно было ожидать, значения аналогичные:

• stretch (по умолчанию)
• flex-start
• flex-end
• center
• space-between
• space-around

Принцип работы этих значений аналогичный justify-content и align-items .

Пример align-content: center

flex-flow

Данное свойство компонует в себя свойства flex-direction и flex-wrap .

flex-flow:

Flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }

Свойства flex-пунктов (flex items)

Flex-пункт является дочерним блоком по отношению к flex-контейнеру. Содержимое flex-контейнера относится к flex-пункту этого контейнера. Содержимое flex-пункта отображается как обычно. Например, пока действует свойство float, flex-пункты никак на это не реагируют. Плавающие также могут находиться внутри самого flex-пункта.

Как говорят, flex-пункты имеют Main Size и Cross Size. Main Size – это размер flex-пункта в направлении главной оси, а Cross Size - в направлении поперечной оси. Фактически, шириной или высотой flex-пункта могут быть Main Size и Cross Size в зависимости от оси flex-контейнера.

Рассмотрим свойства, которые регулируют поведение flex-пунктов.

Order

Order является простейшим свойством. Порядок расположения flex-пунктов обеспечивается расположением flex-пунктов в HTML. В этом примере мы изменим значение свойства order одного flex-пункта на -1 и посмотрим, как при этом поменяется порядок расположения других flex-пунктов.

Flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; } .first { -webkit-order: -1; order: -1; }

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

Margin

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

Например, объявим margin-right: auto; для первого flex-пункта, при этом он предоставит всё возможное свободное пространство справа от себя:

Flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; } .flex-item:first-child{ margin-right: auto; }

Теперь посмотрим на примере как работает margin: auto

Flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; } .flex-item:first-child{ margin: auto; }

align-self

Свойство align-self пункта служит для перекрытия свойства align-items flex-контейнера. Возможные значения аналогичные align-items :

• stretch (по умолчанию)
• flex-start
• flex-end
• center
• baseline

В этом примере мы назначим пунктам различные значения свойства align-self:

Flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; } .item3 { -webkit-align-self: center; align-self: center; } .item4 { -webkit-align-self: baseline; align-self: baseline; } .item5 { -webkit-align-self: baseline; align-self: baseline; padding: 2em 0; } .item6 { -webkit-align-self: stretch; align-self: stretch; }

flex

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

Flex:

Такой синтаксис указывает какую часть должен занимать flex-пункт от общей ширины flex-контейнера. В следующем примере первый flex-пункт будет занимать 2/4 свободного места, а остальные два flex-пункта по 1/4:

​

Flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

Часто приходится равномерно распределять элементы по ширине. Для этого достаточно задать значение данного свойства 1 и все flex-пункты распределятся по ширине контейнера.

​

Flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-flex: 1; flex: 1; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

flex: initial

Flex-пункты с данным значением будет иметь строго фиксированную ширину, но только при наличии свободного пространства (при необходимости уменьшиться в размере - становится резиновым).

flex: auto

Flex-пункты становятся полностью резиновыми вдоль главной оси. Не корректно работает в Chrome 23.0.1271.95, поэтому лучше использовать flex: 1 .

flex: none

flex-пункты становятся фиксированной ширины при всех ситуациях

advanced flex

Свойство flex можно использовать в режиме сокращения для придания спецефичности выбора flex-grow , flex-shrink , и flex-basis в одном объявлении: flex:

В большинтсве случаев не требуется такой синтаксис. Более того, для применения данного сокращения необходимо глубокое понимание модели Flexbox. Вы можете сделать каждое из свойств flex-grow , flex-shrink , и flex-basis специфичным. Я настоятельно рекомендую не использовать данное сокращение: по умолчанию придаются более разумные значения.

visibility

Когда реализуется свойство visibility: collapse; оно будет отличаться от значений visibility: hidden; и display: none; для flex-пунктов. Со значением collapse элемент задействует Cross Size flex-контейнера, но затрагивать пространство главной оси не будет. Это может быть полезным для динамического добавления или удаления flex-пунктов без оказания влияния на Cross Size flex-контейнера.

В настоящее время visibility: collapse; не коррексно работает в браузерах. На данный момент visibility: collapse; выполняет тоже самое что и visibility: hidden; Я уверен, что в ближайшее время ситуация изменится.

Посмотреть, как должно работать значение collapse в спецификации (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)

Заключение

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

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items) . Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

• Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
• Переопределять порядок отображения элементов.
• Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
• Решать проблему с горизонтальным и вертикальным центрированием.
• Переносить элементы внутри контейнера, не допуская его переполнения.
• Создавать колонки одинаковой высоты.
• Создавать прижатый к низу страницы .

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Что такое flexbox

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

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Основные понятия

Рис. 1. Модель flexbox

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

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

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

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

Рис. 2. Режим строки и колонки

2. Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float , clear , vertical-align . Также, на flex-контейнер не оказывают влияние свойства column-* , создающие колонки в тексте и псевдоэлементы::first-line и::first-letter .

Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

Flex-container { /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; } .flex-container { /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; }

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

Рис. 3. Выравнивание элементов в модели flexbox

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

3. Flex-элементы

Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:

• Для flex-элементов блокируется их значение свойства display . Значение display: inline-block; и display: table-cell; вычисляется в display: block; .
• Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
• Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
• Поля margin соседних flex-элементов не схлопываются.
• Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
• margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
• Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto; . Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

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

4.1. Направление главной оси: flex-direction

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

flex-direction
Значения:
row	Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн-оси (inline-axis).
row-reverse	Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.
initial
inherit

Рис. 4. Свойство flex-direction для left-to-right языков

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }

4.2. Управление многострочностью flex-контейнера: flex-wrap

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

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

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap . Значение по умолчанию flex-flow: row nowrap; . свойство не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }

4.4. Порядок отображения flex-элементов: order

Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.

Первоначально все flex-элементы имеют order: 0; . При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order , они будут отображаться в соответствии с исходным порядком.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; }
Рис. 6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

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

Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.

5.1. Задание гибких размеров одним свойством: flex

Свойство является сокращённой записью свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: flex: 0 1 auto; . Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; }

5.2. Коэффициент роста: flex-grow

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }

5.3. Коэффициент сжатия: flex-shrink

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

Рис. 8. Сужение flex-элементов в строке

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }

5.4. Базовый размер: flex-basis

Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content , базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }

6. Выравнивание

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

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow . Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; , свойство не будет оказывать влияния. Свойство не наследуется.

Значения:
flex-start	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
flex-end	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру flex-start .
space-around	Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

Flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }

6.2. Выравнивание по поперечной оси: align-items и align-self

Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto , align-self не имеет никакого влияния.

6.2.1. Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.

Значения:
flex-start
flex-end
center
baseline	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
stretch
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

Flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }

6.2.2. Align-self

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

Значения:
auto	Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера.
flex-start	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через начало поперечной оси.
flex-end	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей margin и рамок border элемента), проходящей через конец поперечной оси.
center	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
baseline	Flex-элемент выравнивается по базовой линии.
stretch	Если поперечный размер flex-элемента вычисляется как auto и ни одно из поперечных значений margin не равно auto , элемент растягивается. Значение по умолчанию.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 11. Выравнивание отдельных flex-элементов

Синтаксис

Flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }

6.3. Выравнивание строк flex-контейнера: align-content

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

Значения:
flex-start	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
flex-end	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
center	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
space-between	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично flex-start . В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
space-around	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент center . В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
stretch	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start . В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 12. Многострочное выравнивание flex-элементов

Синтаксис

Flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }

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

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

Если раньше, миллион лет назад, верстали на таблицах, а потом перелезли на дивы, то сейчас уже без применения flexbox в сочетании с сетками или же готовым css-фреймворком, чувствую, что даже простая верстка на дивах скоро будет считаться «моветоном». Пока это еще не так, но насколько я наблюдаю (точнее, даже не успеваю наблюдать) за развитием в данной области различных методик и best practices, то скорее всего, такой вариант имеет место быть.

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

Верстаем адаптивно

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

Как известно, любой блочный элемент display: block по умолчанию занимает всю доступную ширину экрана, только если мы не определим его ширину явно (либо в px, либо в %) . Но даже если ему будет задана определенная таким образом ширина, то следующий после него блочный элемент будет идти после него с новой строки (этим, кстати и отличается block от inline, который будет следовать друг за другом). Это важный момент, его нужно просто понять, а для того чтобы понять, это дело легко просмотреть в инспекторе любого браузера.

Если же нам надо, чтобы блочные элементы соседствовали друг с другом, то необходимо обтеакание элементов (float), причем нужно задавать ширину блоков в %, чтобы браузер автоматически вычислял ширину в пикселях. Как распространенный пример, это блок контента, а рядом сайдбар. После обтекания элементов, незабываем использовать clearfix, сброс обтекания, чтобы не сломать верстку в дальнейшем.

Самым первым делом мы должны "уведомить" браузер, что хотим использовать адаптивное представление, в соответствии с которым любой браузер будет открывать страницу в этом режиме, делается это вот таким объявлением между тегами head документа:

Meta name="viewport" content="width=device-width, initial-scale=1"

Иными словами, ширина-устройства в масштабе 1:1. И если у вас верстка сделана не адаптивно, то скорее всего будут проблемы при таком отображении в мобильном представлении (скорее всего весь контент сожмется в "гармошку", если логически представить, что может произойти:). Вот с этих пор можно уже говорить о следующем шаге, который есть в любой grid системе или адаптивном фреймворке.

В любой grid системе есть брейкпоинты, точки перехода. Посмотрим на Bootstrap, когда при изменении ширины экрана (мобильный, планшетный вид, и т.д.), происходит проверка элемента, имеющего текущий колоночный класс (к примеру класс десктопа для колонки, в популярном фреймворке Bootstrap, это col-md-{x}, md - десктоп). Классы в свою очередь задают различную ширину в %, равную (100/12) · x, где x - коэффициент ширины, от 1 до 12.

Колоночные классы описывают поведение обтекания элементов: есть класс (в тоже время класс может быть для различных устройств) - обтекание задано, нет - ширина 100% (типично для представления контента на мобильных устройствах). А реализовано это поведение с помощью медиа-запросов, которые понимают все браузеры. Медиа-запрос - в css это понятие означает правило, при выполнении условия которого, подключаются соответствующие стили, например, ширина стала меньше 600px - подключаем новый блок стилей, переопределяющий старый. Например, колоночный класс col-md-{x} подключается по умолчанию от 992px и выше, и отключается до 992px. Но все брейкпоинты бутстраповские по умолчанию можно переопределить своими при компиляции сетки.

Вот и вся простая механика с дивами, которым нужно задать ширину в %, float:left; и очистить обтекание после колонок (в бутстрап колонки оборачиваются во враппер c классом row в этом случае), которые мы выстраиваем в ряд. Все это с легкостью можно реализовать самому и без всякой сетки, когда есть понятие, как это работает, просто в любой сетке прописаны классы и много кода уже написано, вашей задачей остается прописывать классы элементам, вот и все.

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

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

В дивах у нас пускай будет просто текст пока что, потренируемся выравнивать текст (по горизонтали/вертикали). Еще хорошая практика футер исключать из общего враппера, задавать html и body, height:100%, врапперу: min-height:100%, чтобы футер всегда был прижат к низу страницы.

Я привык использовать scss, приведу листинг кода на нем:

$grey: #808080; $h: 50px; html, body { margin: 0; height: 100%; } body { font-family: monospace, sans-serif; text-transform: uppercase; } .row { display: flex; } .vertical-center { align-items: center; justify-content: center; } .wrap { min-height: 100%; header, .content, .sidebar { border: 1px solid $grey; } header { height: $h; } .content { height: 100px; padding: 15px 15px 0 15px; border-top-width: 0; margin-right: 1%; width: 75%; } .sidebar { height: 120px; padding: 15px 15px 0 15px; border-top-width: 0; width: 25%; } } footer { height: $h; border: 1px solid $grey; }

display: flex; - вкл. flex-контекст; свойство flex-direction: row; - по умолчанию, если не укажем column явно. Это то что нам позволяет делать многие потрясающие вещи. Нe совсем уверен, но вроде пока что это свойство не везде поддерживается caniuse, но пора бы уже выкинуть все эти старые браузеры и установить современные, не так ли? :)

Еще задаем соотношение для ширины контент - сайдбар, 75% : 25%. Тот же самый эффект получился бы, если бы использовали бутстрап. Только с класами col-md-9 для контента ((100/12 · 9)% - ширина в процентах, 75) и col-md-3 для сайдбара ((100/12 · 3)% - ширина в процентах, 25)

Итак, давайте разберемся, что происходит и как работает флексбокс. Самое первое, это нужно задать display:flex тому контейнеру, в котором нам нужно производить центрирование, к примеру. В разметке у меня это шапка, подвал и контейнер, внутри которого контент и сайдбар. Самое простейшее, что эффетивно делает флексбокс здесь, так это просто берет и выравнивает текст, который в шапке и подвале, при помощи класса.vertical-center:

.vertical-center { align-items: center; // выравниваем по центру, по вертикали justify-content: center; // выравниваем по центру, по горизонтали }

В результате, текст выравнен в двух направлениях, в шапке и подвале. Осталась средняя часть, здесь, если бы мы не задали display:flex, то по умолчанию остался бы display:block, что в итоге с блоками контента и сайдбара, получилось вот так:

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

Но перед тем, как перейти к этому главному вопросу, для которого и создавалась эта заметка, давайте немного улучшим наш простой макет в плане адаптивности. Сейчас при ресайзе, контент и сайдбар не складываются друг под друга. Необходимо исправить это, так как, представьте себе, что весь текст при малых разрешениях будет некрасиво «спрессован» в области контента и сайдбара. Я не говорю уже про картинки. Кстати, изображениям, которые будут адаптивными обязательно надо задавать:

img{ display:block; max-width:100%; height:auto; }

Воспользуемся медиа-запросами. Улучшаем наш css, я его переписывать весь не буду, просто оставлю // ... * там где код тот же остался:

// .. $mobileBreak: 479px; html, body { // ... } body { // ... } .row { // ... } .middle { @media (max-width: $mobileBreak) { display: block; } } .vertical-center { // ... } .wrap { // ... header, .content, .sidebar { // ... } header { // ... } .content { // ... @media (max-width: $mobileBreak) { width: auto; margin-right: 0; } } .sidebar { // ... @media (max-width: $mobileBreak) { width: auto; } } } footer { // ... }

Теперь сайдбар сложится под контент на телефонах (<480px):

Работа с выравниваниями

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

// ... $mobileBreak: 479px; @mixin wh($w, $h) { width: $w; height: $h; } // ... .content { // ... padding-top: 0; .content-inner { height: 100%; justify-content: space-between; align-items: center; .bounce { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .red { background: #D9534F; } .green { background: #6AB181; } .blue { background: #2D8CD3; } .wh50 { @include wh(50px, 50px); } .wh60 { @include wh(60px, 60px); } .wh35 { @include wh(35px, 35px); } } @media (max-width: $mobileBreak) { // ... } } // ...

Опять таки, там где знаки, // ... , код остается тот же самый.

Результат:

Как видим, шарики выровнены идеально. При добавлении новых шариков, выравнивание будет происходит также без всяких проблем. Свойство align-items: center; отвечает за выравнивание по вертикали, а justify-content: space-between; равномерно выравнивает по горизонтали.

align-items: flex-start; делает вот так:

По аналогии, после применения align-items: flex-end; шарики оказываются внизу контейнера, а align-items: baseline; делает вот так:

Есть еще свойство align-items: stretch;, оно вроде как вытягивает каждый элемент в высоту, но у меня по быстрому не получилось реализовать, поэтому скрин не покажу.

Это все относится к расположению по горизонтальной оси (по умолчанию). Но если мы сделаем явно column:

.content-inner { flex-direction: column; }

То шарики станут по вертикали! И опять таки, применяя различные свойства align-items, мы будем добиваться всего того, что и при горизонтальном построении шариков, но только уже по вертикали! Еще есть свойство align-self, оно переопределяет свойство align-items для одного какого нибудь шарика, или группы. Вот таким вот способом можно гибко управлять всеми выравниваниями.

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

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

Привет, хабр!

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации , написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.

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

Техническая часть

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

Итак. Во FlexBox есть два основных типа элементов: Гибкий Контейнер (Flex Container) и его дочерние элементы - Гибкие Элементы (Flex Item). Для инициализации контейнера достаточно присвоить, через css, элементу display: flex; или display: inline-flex; . Разница между flex и inline-flex заключается лишь в принципе взаимодействия с окружающими контейнер элементами, подобно display: block; и display: inline-block;, соответственно.

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

Направлением осей можно управлять с помощью css-свойства flex-direction . Данное свойство принимает ряд значений:
row (default): Главная ось гибкого контейнера имеет ту же ориентацию, как и инлайн ось текущего режима направления строк . Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн оси (inline-axis).
row-reverse : Все то же самое, что и в row только main-start и main-end меняются местами.
column : так же само как и row, только теперь главная ось направлена сверху вниз.
column-reverse : так же само как row-reverse, только главная ось направлена снизу вверх.
Как это работает можно посмотреть в примере на jsfiddle .

По умолчанию все гибкие элементы в контейнере укладываются в одну строку, даже если не помещаются в контейнер, они выходят за его границы. Данное поведение переключается с помощью свойства flex-wrap . У этого свойства есть три состояния:
nowrap (default): гибкие элементы выстраиваются в одну строку слева направо.
wrap : гибкие элементы строятся в многострочном режиме, перенос осуществляется по направлению кросс оси, сверху вниз.
wrap-reverse : так же как и wrap, но перенос происходит снизу вверх.
Смотрим пример .

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

Элементы в контейнере поддаются выравниванию при помощи свойства justify-content вдоль главной оси. Это свойство принимает целых пять разных вариантов значений.
flex-start (default): гибкие элементы выравниваются по началу главной оси.
flex-end : элементы выравниваются по концу главной оси
center : элементы выравниваются по центру главной оси
space-between : элементы занимают всю доступную ширину в контейнере, крайние элементы вплотную прижимаются к краям контейнера, а свободное пространство равномерно распределяется между элементами.
space-around : гибкие элементы выравниваются таким образом, что свободное пространство равномерно распределяется между элементами. Но стоит отметить, что пространство межу краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
Конечно же поклацать пример работы этого свойства можно .

Это еще не все, мы так же имеем возможность выравнивания элементов по кросс оси. Применив свойство align-items , которое принимает также пять разных значений, можно добиться интересного поведения. Это свойство позволяет выравнивать элементы в строке относительно друг друга.
flex-start : все элементы прижимаются к началу строки
flex-end : элементы прижимаются к концу строки
center : элементы выравниваются по центру строки
baseline : элементы выравниваются по базовой линии текста
stretch (default): элементы растягиваются заполняя полностью строку.

Еще одно похожее свойство на предыдущее это align-content . Только оно отвечает за выравнивание целых строк относительно гибкого контейнера. Оно не будет давать эффекта если гибкие элементы занимают одну строку. Свойство принимает шесть разных значений.
flex-start : все линии прижимаются к началу кросс-оси
flex-end : все линии прижимаются к концу кросс-оси
center : Все линии паком выравниваются по центру кросс оси
space-between : линии распределяются от верхнего края до нижнего оставляя свободное пространство между строками, крайние же строки прижимаются к краям контейнера.
space-around : линии равномерно распределяются по контейнеру.
stretch (default): линии растягиваются занимая все доступное пространство.
Попробовать как работают align-items и align-content можно в этом примере . Я специально два этих свойства представил в одном примере, так как они довольно плотно взаимодействуют каждый выполняя свою задачу. Обратите внимание что происходит когда элементы помещаются в одну строку и в несколько.

С параметрами гибкого контейнера разобрались, осталось разобраться со свойствами гибких элементов.
Первое свойство с которым мы познакомимся это order . Это свойство позволяет менять позицию в потоке конкретному элементу. По умолчанию все гибкие элементы имеют order: 0; и строятся в порядке естественного потока. В примере можно увидеть как меняются местами элементы если к ним применять разные значения order.

Одно из основных свойств является flex-basis . С помощью этого свойства мы можем указывать базовую ширину гибкого элемента. По умолчанию имеет значение auto . Это свойство тесно связано с flex-grow и flex-shrink , о которых я расскажу чуть позже. Принимает значение ширины в px, %, em и остальных единицах. По сути это не строго ширина гибкого элемента, это своего рода отправная точка. Относительно которой происходит растягивание или усадка элемента. В режиме auto элемент получает базовую ширину относительно контента внутри него.

flex-grow на нескольких ресурсах имеет совершенно некорректное описание. Там говорится о том, что якобы оно задает соотношение размеров элементов в контейнере. На самом деле это не так. Это свойство задает фактор увеличения элемента при наличии свободного места в контейнере. По умолчанию это свойство имеет значение 0. Давайте представим, что у нас есть гибкий контейнер, который имеет ширину 500px, внутри него есть два гибких элемента, каждый из которых имеет базовую ширину 100px. Тем самым в контейнере остается еще 300px свободного места. Если первому элементу укажем flex-grow: 2;, а второму элементу укажем flex-grow: 1;. В результате эти блоки займут всю доступную ширину контейнера, только ширина первого блока будет 300px, а второго только 200px. Что же произошло? А произошло вот что, доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму. Собственно так это и работает.

Тут мы плавно переходим к другому аналогичному свойству, а именно flex-shrink . По умолчанию имеет значение 1. Оно так же задает фактор на изменение ширины элементов, только в обратную сторону. Если контейнер имеет ширину меньше чем сумма базовой ширины элементов, то начинает действовать это свойство. Например контейнер имеет ширину 600px, а flex-basis элементов по 300px. Первому элементу укажем flex-shrink: 2;, а второму flex-shrink: 1;. Теперь сожмем контейнер на 300px. Следовательно сумма ширины элементов на 300px больше чем контейнер. Эта разница распределяется в соотношении 2:1, получается от первого блока отнимаем 200px, а от второго 100px. Новый размер элементов получается 100px и 200px, у первого и второго элемента, соответственно. Если мы устанавливаем flex-shrink в значение 0, то мы запрещаем сжиматься элементу до размеров меньше чем его базовая ширина.

На самом деле это очень упрощенное описание того как это все работает, дабы было понятен общий принцип. Более подробно, если кому интересно, алгоритм описан в спецификации.

Все три свойства можно записать в сокращенной форме при помощи выражения flex . Это имеет следующий вид:
flex: ;
А так же мы можем писать еще два сокращенных варианта, flex: auto; и flex: none; , что означает flex: 1 1 auto; и flex: 0 0 auto; соответственно.

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

Все, надоел! Примеры давай!

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

Для начала обозначим основную ширину страницы, выровняем по центру, прижмем футер к низу страницы. Как всегда в общем.

Html { background: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; } body { margin: 0; padding: 0 15px; display: -webkit-flex; display: flex; flex-direction: column; flex: auto; } .header { width: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; padding: 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; } .main { width: 100%; max-width: 960px; min-width: 430px; margin: auto; flex-grow: 1; box-sizing: border-box; } .footer { background: #222; width: 100%; max-width: 960px; min-width: 430px; color: #eee; margin: auto; padding: 15px; box-sizing: border-box; }

За счет того что мы для.main указали flex-grow: 1; он растягивается на всю доступную высоту, тем самым прижимая футер к низу. Бонусом в этом решении является, то что футер может быть нефиксированной высоты.

Разместим теперь логотип и меню в хедере.
.logo { font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; } .logo:before, .logo:after { content: ""; display: block; } .logo:before { background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; } .logo:after { background: #222; width: 90px; height: 30px; } .nav { margin: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; } .nav-itm { background: #222; width: 130px; height: 50px; font-size: 1.5rem; color: #eee; text-decoration: none; margin: 5px 0 0 5px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; }

Поскольку для хедера указано flex-wrap: wrap; и justify-content: space-between; логотип и меню раскидывает по разным сторонам хедера, при этом если места для меню будет не хватать оно элегантно сместится под логотип.

Далее мы видим большой пост или баннер, затрудняюсь сказать что это конкретно, но и не суть. У нас есть картинка справа и текст с заголовком слева. Я лично придерживаюсь идеи, что любые элементы должны быть максимально гибкими, независимо от того адаптиваная это верстка или статика. Итак у нас есть в этом посте сайд-бар в котором размещена картинка, строго говоря мы не можем точно сказать какая ширина нам нужна, ибо сегодня у нас большая картинка, завтра маленькая и каждый раз переделывать элемент с нуля неохота. Значит нам нужно, чтобы сайд-бар занял нужное ему место, а остальное место пошло на контент. Так и сделаем:

Box { font-size: 1.25rem; line-height: 1.5; font-style: italic; margin: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; } .box-base { margin-left: 50px; flex: 1 0 430px; } .box-side { margin-left: 50px; flex: none; } .box-img { max-width: 100%; height: auto; }

Как вы видите для.box-base, там где у нас заголовок и текст, я указал базовую ширину посредством flex-basis: 430px; , а так же запретил усадку блока при помощи flex-shrink: 0; . Этой манипуляцией мы сказали, что контент не может стать меньше чем 430px в ширину. А ввиду того что для.box я указываю flex-wrap: wrap; в тот момент, когда сайд-бар и контент не будут помещаться в контейнер.box, сайд-бар автоматически провалится под контент. И это все без применения @ media ! Я считаю это действительно очень круто.

У нас остался трехколоночный контент. Решений подобной задачи несколько, я покажу один из них, в остальных макетах есть и другой вариант.
Создаем контейнер, назовем его.content и настроим.
.content { margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; }

В контейнере три колонки, .banners, .posts, .comments
.banners { flex: 1 1 200px; } .posts { margin: 0 0 30px 30px; flex: 1 1 200px; } .comments { margin: 0 0 30px 30px; flex: 1 1 200px; }

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

По макету, нам с контентом, обойтись без @ media не получится, поэтому еще немного настроим поведение колонок для ширины <800px и <600px.
@media screen and (max-width: 800px) { .banners { margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; } .posts { margin-left: 0; } } @media screen and (max-width: 600px) { .content { display: block; } .banners { margin: 0; display: block; } .comments { margin: 0; } }

Вот и вся магия, что касается построения лейаута на FlexBox. Еще одна задача, которая мне понравилась, находится в 5-ом макете, конкретно это касается адаптации контента.

Мы видим, как на десктопном разрешении посты построены в сетку по три штуки в ряд. Когда ширина viewport становится меньше 800px, то сетка превращается в колонку с постами, где фото поста выстраивается с левой и правой стороны от контента поста, поочередно. А при ширине меньше 600px фото поста прячется вовсе.
.grid { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; } .grid-itm { margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap; } .grid-img { margin: 0 auto 20px; flex: 0 1 80%; } .grid-cont{ flex: 0 1 100%; } .grid-title { text-align: center; } @media screen and (max-width: 800px) { .grid-itm { flex-wrap: nowrap; flex-basis: 100%; } .grid-img { flex: 0 0 auto; } .grid-itm:nth-child(even) .grid-img { margin: 0 0 0 30px; order: 2; } .grid-itm:nth-child(odd) .grid-img { margin: 0 30px 0 0; } .grid-cont { flex: 1 1 auto; } .grid-title { text-align: left; } } @media screen and (max-width: 600px) { .grid-img { display: none; } }

На самом деле это всего лишь малая часть того, что можно реализовать на FlexBox. Спецификация позволяет строить весьма сложные макеты страниц при этом применяя простой код.

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» - приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся - логика наше все!

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

Базовые знания

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (>), а кросс ось соответственно вертикальная и направлена сверху вниз (v).

Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (v) и когда перестанут вмещаться в высоту то будут двигаться слева направо (>) - то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется - меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут - это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали... См. пример.

Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы их представить и понять, давайте представим: есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству . А вот так это выглядит схематически:

CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции - там используется другая модель построения макета и эти css свойства просто игнорируются...

CSS свойства Flexbox

Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.

Для контейнера

display:

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

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

flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

flex-direction:

Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

• row (default) - направление элементов слева направо (>)
• column - направление элементов сверху вниз (v)
• row-reverse - направление элементов справа налево (<)
• column-reverse - направление элементов снизу вверх (^)

flex-wrap:

Управляет переносом непомещающихся в контейнер элементов.

• nowrap (default) - вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
• wrap - включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
• wrap-reverse - тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

flex-flow: direction wrap

Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

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

/* только flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* только flex-wrap */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* сразу оба значения: flex-direction и flex-wrap */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

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

align-content:

Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

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

Это свойство мало где нужно и чаще используется align-items (см.ниже).

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

align-items:

Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

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

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

flex-grow:

Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

По умолчанию flex-grow: 0

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

Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow: 2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-grow:0.5

flex-shrink:

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

По умолчанию flex-shrink:1

Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px - flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-shrink:0.5

flex-basis:

Устанавливает базовую ширину элемента - ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px , % , em , rem и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. В режиме auto элемент получает базовую ширину относительно контента внутри него.

По умолчанию: auto

Иногда может пригодится установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink. Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis... Пример .

flex-basis будет «жестким», если указать обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; - коротко можно записать так flex:0 0 200px; .

flex: {grow shrink basis}

Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

По умолчанию: flex: 0 1 auto

Однако можно указать и одно, и два значения:

Flex: none; /* 0 0 auto */ /* число */ flex: 2; /* flex-grow (flex-basis переходит в 0) */ /* не число */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow и flex-basis */ flex: 2 2; /* flex-grow и flex-shrink (flex-basis переходит в 0) */ flex: 2 2 10%; /* flex-grow и flex-shrink и flex-basis */ align-self:

Позволяет изменить свойство align-items , только для отдельного элемента.

По умолчанию: от align-items контейнера

• stretch - элемент растягиваются заполняя строку полностью
• flex-start - элемент прижимаются к началу строки
• flex-end - элемент прижимаются к концу строки
• center - элемент выравниваются по центру строки

baseline - элемент выравниваются по базовой линии текста

order:

Позволяет менять порядок (позицию, положение) элемента в общем ряду.

По умолчанию: order: 0

По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 ... . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

Заметки

Чем отличается flex-basis от width?

Ниже важные различия между flex-basis и width / height:

flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). .

flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

Абсолютные элементы контейнера не участвуют во flex конструкции... А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

• При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.

По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

Отличие flex-basis от width - баг или фича?

Контент внутри flex элемента распирает его и не может вылезти за его пределы, кроме случаев когда ширина элемента не установлена через width или max-width . flex-basis тут не справится... Смотрите пример:

Примеры Flex верстки

В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры нужно смотрите в более-менее последних версиях chrome или firefox.

#1 Простой пример с выравниванием по вертикали и горизонтали

Начнем с самого простого примера - выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

Или так, без блока внутри:

#1.2 Разделение (разрыв) между элементами флекс блока

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

#2 Адаптивное меню на flex

Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

#3 Адаптивные 3 колонки

Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

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

Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

#4 Адаптивные блоки на flex

Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

#5 Галерея на flex и transition

Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

#6 Флекс во флекс (просто пример)

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

Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат - текст начинался с одной линии...

Еще примеры

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

Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96% используемых сегодня браузеров, с префиксами 97% - и это отличный показатель, для того чтобы во всю пользоваться flexbox.

Чтобы знать какие префиксы актуальны на сегодня (фев. 2017), приведу пример всех flex правил с нужными префиксами :

/* Контейнер */ .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* Элементы */ .flex-item { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 2; -ms-flex-negative: 2; flex-shrink: 2; -webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 1; -webkit-flex: 1 2 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; }

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

Chrome	Safari	Firefox	Opera	IE	Android	iOS
20- (old)	3.1+ (old)	2-21 (old)		10 (tweener)	2.1+ (old)	3.2+ (old)
21+ (new)	6.1+ (new)	22+ (new)	12.1+ (new)	11+ (new)	4.4+ (new)	7.1+ (new)

• (new) - новый синтаксис: display: flex; .
• (tweener) - старый неофициальный синтаксис 2011 года: display: flexbox; .
• (old) - старый синтаксис 2009 года: display: box;

Видео

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

Полезные ссылки по Flex

flexboxfroggy.com - игра обучающая flexbox.

Flexplorer - наглядный конструктор flex кода.