Flex

flexDirection

Свойство контейнера.

Определяет главную ось контейнера (направление блоков в контейнере).

Возможные значения: row, column, row-reverse, column-reverse

flexBasis: "auto" | number | percent

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

Свойство блока.

Задаёт исходный размер блока по главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

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

Свойства flexGrow и flexShrink могут влиять на размер блока в зависимости от размеров контейнера.

Такие свойства как minWidth, minHeight, maxWidth и maxHeight имеют приоритет над flexBasis.

При flexBasis = auto исходный размер блока зависит от содержимого. Размер контейнера на размер блока не влияет. При нехватке места в контейнере, блоки займут избыточное место за его пределами.

Процентное значение flexBasis задаёт исходный размер блока в зависимости от размера контейнера. Блоки не ограничены размером контейнера и при нехватке места займут избыточное место за его пределами.

Абсолютное значение flexBasis задаёт исходный размер блока в пикселях и независимо от размеров контейнера. Блоки не ограничены размером контейнера и при нехватке места займут избыточное место за его пределами.

Использование блоков с разным типом размера flexBasis в одном контейнере. Пример иллюстрирует как блоки занимают избыточное место за пределами контейнера.

flexGrow: number

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

Свойство блока.

Коэффициент роста блока по главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

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

Важно отметить, что это доля только от свободного места в контейнере, а не от всего доступного. Свободное место, это то что остаётся после занятия пространства блоками согласно их базовым размерам. Базовый размер блока определяется его содержимым, свойством flexBasis или свойствами размера, такими как width и height.

Такие свойства как minWidth, minHeight, maxWidth и maxHeight имеют приоритет над flexGrow.

Блокам задан нулевой flexGrow. Такие блоки не растут и занимают место только согласно базовым размерам. Свободное место в контейнере остаётся не занятым.

Всем блокам задан одинаковый flexGrow. Блоки растут распределяя свободное место пропорционально между друг другом.

Блоки с нулевым flexGrow не растут и занимают место согласно базовым размерам, в то время как единственный блок с flexGrow отличным от нуля занимает всё свободное место. Конкретное значение flexGrow отличного от нуля в данном случае не важно.

Блокам заданы разные значения flexGrow. Блоки растут распределяя свободное место согласно долям указанным в flexGrow.

Блокам задан нулевой базовый размер flexBasis. Блоки с нулевым базовым размером не занимают никакого места и всё пространство контейнера становится свободным местом. Тогда весь размер блока, а не только рост, расчитывается исходя из доли указанной во flexGrow.

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

flexShrink: number

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

Свойство блока.

Коэффициент сжатия блока по главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

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

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

Такие свойства как minWidth, minHeight, maxWidth и maxHeight имеют приоритет над flexShrink.

Блоки с нулевым flexShrink не уменьшают свой размер при нехватке места в контейнере. Размер блоков в данном примере определяется содержимым и занимает избыточное место за пределами контейнера.

Блоки с одинаковым flexShrink уменьшат свой размер на одинаковую абсолютную величину.

Блоки с нулевым flexShrink не уменьшают свой размер, в то время как единственный блок с flexShrink отличным от нуля уменьшится до устранения избыточно занимаемого места или собственного минимального размера. Конкретное значение flexShrink отличного от нуля в данном случае не важно.

Единственный блок с нулевым flexShrink не уменьшит свой размер. Два других блока с flexShrink отличным от нуля уменьшатся на доли от избыточно занимаемого места. Доли расчитанные по их flexShrink.

flex: number

Свойство блока.

Задаёт поведение размера блока (рост, сжатие и исходный размер) по главной оси контейнера. Ось контейнера задаётся свойством flexDirection

Свойство стоит воспринимать как сокращённый синтаксис для типовых сценариев.

Такие свойства как minWidth, minHeight, maxWidth и maxHeight имеют приоритет над flex.

number = 0  — эквивалентно flexGrow = 0, flexShrink = 0 и flexBasis = auto.

number > 0  — эквивалентно flexGrow = number, flexShrink = 1 и flexBasis = 0%.

number < 0  — эквивалентно flexGrow = 0, flexShrink = 1 и flexBasis = auto.

flex = 0 блоки занимают место только согласно базовым размерам. Не растут и не уменьшаются. Свободное место в контейнере остаётся не занятым.

flex > 0 наиболее простой вариант использования flex. Исходный размер блока игнорируется. Конечный размер блока целиком рассчитывается по доле flexGrow от свободного места в контейнере.

flex < 0 вариант при котором блок занимает размер согласно содержимому только при условии наличия свободного места. Минимальный размер блока определяется minWidth или minHeight. Конкретное значение flex менее нуля не важно.

justifyContent

Свойство контейнера.

Выравнивание и распределение пространства по главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

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

Возможные значения: flex-start, flex-end, center, space-between, space-around, space-evenly

alignItems

Свойство контейнера.

Выравнивание поперёк главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

Возможные значения: flex-start, flex-end, center, baseline, stretch

alignContent

Свойство контейнера.

Распределение пространства поперёк главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

Это свойство имеет силу только в пределах контейнеров со свойством flexWrap = wrap или flexWrap = wrap-reverse. Для контейнеров со свойством flexWrap в значении по умолчанию no-wrap, свойство alignContent не работает.

Возможные значения: flex-start, flex-end, center, stretch, space-between, space-around

alignSelf

Свойство блока.

Выравнивание конкретного блока поперёк главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

Позволяет задать специфичное выравнивание для конкретного блока, вопреки свойству alignItems контейнера.

Возможные значения: auto, flex-start, flex-end, center, baseline, stretch

flexWrap

По-умолчанию: nowrap

Свойство контейнера.

Перенос блоков на новую строку вдоль главной оси контейнера. Ось контейнера задаётся свойством flexDirection.

Блоки стараются уместиться в одну строку и по умолчанию при нехватке свободного места начинают занимать избыточное место за пределами контейнера. Свойство flexWrap = wrap или flexWrap = wrap-reverse меняют это поведение и блоки вместо занятия избыточного места переносятся на новую строку.

Возможные значения: nowrap, wrap, wrap-reverse