Шпаргалка по флексам (CSS Flexbox Layout)
<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;
}