CSS Flex

CSS Flex в настоящее время рекомендуется W3C и способен более эффективным способом расположить, выровнять и распределить место элементам в контейнере, даже если размер контейнера неизвестен или динамически меняется (поэтому flex).

Оглавление:
  1. CSS Flexbox
  2. Использовать Flexbox
  3. flex-containers
  4. flex-direction
  5. flex-wrap
  6. flex-flow
  7. justify-content
  8. align-items
  9. align-content
  10. order
  11. flex-grow
  12. flex-shrink
  13. flex-basis
  14. flex
  15. align-self
  16. Поддержка браузерами flex

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

Старый Flexbox (CSS Box) за последние три года потерпел много изменений. Изменения были как в спецификации W3C так и в браузерах для реализации. Теперь новый CSS Flexbox не имеет проблем с производительностью.

Пример старый макет Flexbox требует ~ 43.5ms

Пример новый макет Flexbox требует ~ 18.2ms

Чтобы применить CSS Flexbox к некоторым старым мобильным браузерам используйте макет наследие Flexbox.

CSS Flexbox

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

Если обычная разметка предназначена для направления потока всех блоков, то макет CSS Flexbox основан на гибкости направления потока. На рисунке показана основная идея макета flex.

Основная идея макета flex.
Макет CSS3 Flexbox основан на гибкости направления потока.

В принципе, элементы будут размещаться либо по горизонтали как основное направление от main-start до main-end или по вертикали перпендикулярно основному направлению от cross-start до cross-end.

к меню ↑

Использовать Flexbox

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

Демо

к меню ↑

flex-containers

Значения для контейнера CSS flex:

display: flex | inline-flex

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

float, clear и vertical-align не имеют никакого влияния на элемент flex.

flex-containers

к меню ↑

flex-direction

Свойство flex-direction добавляет гибкость элементам в контейнере основного направления main-axis:

flex-direction: row | row-reverse | column | column-reverse
  • row (по умолчанию): в ltr слева направо, в rtl справа налево
  • row-reverse: в ltr справа налево, в rtl слева направо
  • column: так же, как и row, но сверху вниз
  • column-reverse: то же что и row-reverse, но только сверху вниз

flex-direction

к меню ↑

flex-wrap

Свойство flex-wrap определяет сколько строк в контейнере и новое положение элементов перпендикулярно основному направлению cross-axis.

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap по умолчанию!: в ltr одна колона слева направо; в rtl справа налево
  • wrap: в ltr много колонок слева направо; в rtl справа налево
  • wrap-reverse: в ltr много колонок справа налево; в rtl слева направо

flex-wrap

к меню ↑

flex-flow

Свойство flex-flow сокращяет flex-direction и flex-wrap в совокупности определяют все направления контейнера flexbox. По умолчанию row nowrap.

flex-flow: flex-direction | flex-wrap

flex-flow

к меню ↑

justify-content

Свойство justify-content выравнивает элементы параллельно основному направлению main-start. Это помогает распределять дополнительное свободное пространство когда оставшиеся или все элементы Flex в полосе не являются гибкими или гибкие, но достигли своего максимального размера. Также контроль над выравниванием элементов когда переполнение.

justify-content: flex-start | flex-end | center | space-between | space-around
  • flex-start по умолчанию!: контейнер элементов в начале полосы
  • flex-end: контейнер элементов в конце полосы
  • center: элементы сосредоточены вдоль полосы
  • space-between: элементы равномерно распределены в полосе; первый пункт находится в начале полосы, последний пункт в конце полосы
  • space-around: элементы распределены равномерно в соответствии с окружающем пространством
Свойство justify-content выравнивает элементы
Свойство justify-content выравнивает элементы параллельно main-start

justify-content

к меню ↑

align-items

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

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start: элементы размещаются в верхнем крае в начале полосы
  • flex-end: элементы размещаются в нижнем крае в конце полосы
  • center: элементы в центре cross-axis
  • baseline: элементы распределены согласно полосе
  • stretch по умолчанию!: для заполнения контейнера принимает значение min-width или max-width
Обычно указывает поведение элементам Flex
Свойство align-items размещает элементы Flex перпендикулярно основного направления

align-items

к меню ↑

align-content

Свойство align-content выровняет содержимое контейнера flex, если есть дополнительное пространство в cross-axis. Похоже на то, как justify-content выравнивает отдельные элементы в main-axis.

это свойство не имеет никакого эффекта, когда flexbox только один.

align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • flex-start: пакет элементов в начале контейнера
  • flex-end: пакет элементов в конце контейнера
  • center: пакет элементов в центре контейнера
  • space-between: полосы равномерно распределены в первой строке в начале контейнера, в то время как последние находятся в конце
  • space-around: полосы равномерно распределяются на равное пространство между ними
  • stretch (по умолчанию) заполняет свободное пространство
Выравняет полосы контейнера Flex
Выровняет контейнеры Flex если есть дополнительное пространство в cross-axis

align-content

к меню ↑

order

По умолчанию элементы flex оформляются в исходном порядке. Свойство order определит порядок расположения в контейнере.

order: integer

order

к меню ↑

flex-grow

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

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

flex-grow: number (по умолчанию 0)

отрицательные числа недействительны.

flex-grow

к меню ↑

flex-shrink

Если нужно, свойство flex-shrink добавит возможность уменьшаться элементам flex.

flex-shrink: number (по умолчанию 1)

отрицательные числа недействительны.

flex-shrink

к меню ↑

flex-basis

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

flex-basis: length | auto (по умолчанию auto)

flex-basis

к меню ↑

flex

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

flex: none | flex-grow flex-shrink | flex-basis

flex

к меню ↑

align-self

Свойство align-self позволяет выровнять дочерние элементы по умолчанию, значение align-items изменит выбраненные элементы flex. Чтобы понять доступные значения см. объяснения align-items.

align-self: auto | flex-start | flex-end | center | baseline | stretch

align-self

к меню ↑

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

  • (Новый) означает недавний синтаксис из спецификации (например, display: flex;)
  • (Гибрид) означает неофициальный синтаксис с 2011 года (например, display: flexbox;)
  • (Старый) означает, что это старый синтаксис с 2009 года (например, display: box;)
Поддержка браузерами CSS flex
Chrome Safari Firefox Opera IE Android IOS
21 + (новый)
20 (старый)
3,1 + (старый) 2-21 (старый)
22 + (новый)
12,1 + (новый) 10 + (гибрид) 2.1 + (старый) 3.2 + (старый)

BlackBerry Browser 10 + поддерживает новый синтаксис.

Посмотреть результат применения свойств и значений CSS Flex на странице блога html5.by.