Памятка по флексам

display: flex

Задает флекс-контейнер, а его дочерние элементы становятся флекс-элементами.

display: flex | inline-flex;

display: flex;
display: inline-flex;

flex-direction

Задает направление основной оси флекс-контейнера.

flex-direction: row (default) | row-reverse | column | column-reverse;

flex-wrap

Включает перенос флекс-элементов на следующие строки, если они не помещаются на текущей.

flex-wrap: nowrap (default) | wrap | wrap-reverse;

flex-flow

Сокращенное свойство для flex-direction и flex-wrap.

flex-flow: row nowrap (default) | column-reverse | column wrap | row-reverse wrap-reverse;

row-gap, column-gap

Отступы между рядами и колонками.

row-gap: 0 (default) | 40px | 20rem | 3%;

gap

Сокращение для row-gap и column-gap.

gap: row-gap column-gap;

align-items

Выравнивание флекс-элементов поперек основной оси (по вертикали).

align-items: stretch (default) | flex-start | flex-end | center | baseline;

place-items

Сокращение для align-items и justify-items.

place-items: stretch | start | normal | flex-start | flex-end | center | end | baseline | legacy | left | right | self-start | self-end | first baseline | last baseline;

align-content

Выравнивание строк флекс-элементов поперек основной оси (по вертикали).

align-content: stretch (default) | flex-start | flex-end | center | space-between | space-around | space-evenly;

justify-content

Выравнивание флекс-элементов вдоль основной оси (по горизонтали).

justify-content: flex-start (default) | flex-end | center | space-between | space-around | space-evenly;

place-content

Сокращение для align-content и justify-content.

place-content: flex-start | start | left | center | end | flex-end | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;

order

Изменять порядок вывода флекс-элементов.

order: 0 (default) | -1 | 1;

flex-grow

Может ли элемент растягиваться (коэффициент растягивания).

flex-grow: 0 (default) | 1;

flex-shrink

Может ли элемент сжиматься (коэффициент сжатия).

flex-shrink: 1 (default) | 0;

flex-basis

Ширина элемента (начальная?).

flex-basis: auto (default) | content | 200px | 50%;

flex

Сокращение для flex-grow, flex-shrink и flex-basis.

flex: 0 1 auto (default) | 0 0 200px | 1 1 50%;

align-self

Выравнивание флекс-элемента поперек основной оси (по вертикали), переписывает значение align-items.

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