Шпаргалка по флексам (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%
}


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

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

Card 1
Card 2
Card 3
<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;
}





Автор: Олег Миторун