Памятка по Флекс (Flex)

<div class="flex-container">
  <div class="flex-element">1</div>
  <div class="flex-element">2</div>
  <div class="flex-element">3</div>
</div>

Свойства флекс-контейнера

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;

gap, row-gap, column-gap

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

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

Свойства для выравнивания

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;

Примеры применения

Отцентрировать блок

Расположить блок по центру по вертикали и горизонтали.

<div class="flex">
  <div class="flex-element">Набери текст</div>
</div>

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}

Простая галерея

Галерея с перестраиваемыми карточками по центру.

<div class="flex">
  <div class="flex-element">Card 1</div>
  <div class="flex-element">Card 2</div>
  <div class="flex-element">Card 3</div>
</div>

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}