Flexbox

display

flex | inline-flex

Делает элемент флекс-контейнером; дети становятся флекс-элементами.

flex-direction

row | row-reverse | column | column-reverse

Направление главной оси.

• row
• column

flex-wrap

nowrap | wrap | wrap-reverse

Переносить ли элементы на новую строку.

flex-flow

<flex-direction> <flex-wrap>

Краткая запись направления и переноса.

justify-content

flex-start | center | space-between | space-evenly …

Распределение по главной оси.

• flex-start
• center
• space-between
• space-evenly

align-items

stretch | flex-start | center | flex-end | baseline

Выравнивание по поперечной оси.

• stretch
• flex-start
• center
• flex-end

align-content

stretch | flex-start | center | space-between …

Распределение строк по поперечной оси; работает, когда строк несколько.

gap

<row-gap> [<column-gap>]

Расстояние между элементами — без полей у крайних.

flex

none | <grow> <shrink> <basis>

Краткая запись. flex: 1 — растянуться на свободное место поровну.

flex-grow

<number>

Доля свободного места, которую забирает элемент.

flex-shrink

<number>

Насколько элемент сжимается при нехватке места; 0 — не сжимается.

flex-basis

auto | content | <length>

Исходный размер до распределения места.

align-self

auto | flex-start | center | flex-end | stretch

align-items для одного элемента.

order

<integer>

Порядок отрисовки. Не меняет порядок чтения и табуляции.