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. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

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

К началу

Flexbox

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

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

Чтобы применить Flexible Box к некоторым старым мобильным браузерам, смотрите макет “Наследие Flexbox”.

К началу

Flexible Box

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

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

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

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

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

Демо

К началу

flex-containers

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

flex: display: flex | inline-flex;

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

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

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, в совокупности определяют направление контейнера. По умолчанию row nowrap.

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

flex-flow

justify-content

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

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 расположит элементы вдоль основного направления 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 размещает элементы перпендикулярно основного направления

align-items

К началу

align-content

Свойство align-content выровняет содержимое контейнера, если есть дополнительное пространство в 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

К началу

order

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

order: integer;

order

flex-grow

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

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

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

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

flex-grow

К началу

flex-shrink

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

flex-shrink: значение (по умолчанию 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 изменит выбраненные элементы. Чтобы понять доступные значения см. объяснения align-items.

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

align-self

Поддержка

  • новый — display: flex;
  • гибрид — display: flexbox;
  • старый — display: box;
Поддержка браузерами CSS flex
Chrome Safari Firefox Opera IE Edge Android
21+ новый
20 старый
3,2+ старый
9+ новый
2-21 старый
22+ новый
12,1+ новый 10+ гибрид 12+ новый 2.1+ старый,
4.4 новый

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

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)