1. Главная
2. Веб
3. ...

Шпаргалка по флексам (CSS Flexbox Layout)

HTML:

<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 | inline-flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

flex-grow: 0 (default) | 1;

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

flex-shrink: 1 (default) | 0;

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

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

Ширина элемента.

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

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

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

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

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

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

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

<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;
}