CSS Flex

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

Оглавление:
  1. Flexbox
  2. Flexible Box
  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. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

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

К началу

Flexbox

Старый CSS Flexbox display: box; за последние годы потерпел много изменений. Изменения были как в спецификации W3C, так и в браузерах для реализации. Теперь новый CSS Flex не имеет проблем с производительностью.

Старый макет Flexbox требует ~ 43.5ms

Новый макет Flex требует ~ 18.2ms

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

К началу

Flexible Box

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

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

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

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

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

Демо

К началу

flex-containers

Значения для контейнера flex: display: flex | inline-flex;

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

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

flex-containers W3C

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 W3C

К началу

flex-wrap

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

flex-wrap: nowrap | wrap | wrap-reverse;

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

flex-wrap W3C

К началу

flex-flow

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

flex-flow: flex-direction | flex-wrap;

flex-flow W3C

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 W3C

К началу

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 W3C

К началу

align-content

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

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 W3C

К началу

order

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

order: integer;

order W3C

flex-grow

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

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

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

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

flex-grow W3C

К началу

flex-shrink

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

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

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

flex-shrink W3C

flex-basis

Свойство flex-basis определяет размер элементу.

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

flex-basis W3C

flex

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

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

flex W3C

align-self

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

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

align-self W3C

Поддержка

  • новый — display: flex;
  • гибрид — display: flexbox;
  • старый — 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 + поддерживает новый синтаксис.

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