⚡ Кратко
flex, flex-col, justify-*,
items-*, gap-*, flex-1,
shrink-0, flex-wrap.
display
| Класс | CSS | Когда |
|---|
block | display: block | обычный блок |
inline-block | display: inline-block | элемент в строке с отступами |
inline | display: inline | внутри текста |
flex | display: flex | раскладка по одной оси |
inline-flex | display: inline-flex | кнопка с иконкой |
grid | display: grid | сетка (урок 09) |
hidden | display: none | скрыть элемент |
contents | display: contents | «растворить» обёртку |
Направление и перенос
| Класс | CSS |
|---|
flex-row | flex-direction: row (по умолчанию) |
flex-col | flex-direction: column |
flex-row-reverse, flex-col-reverse | обратный порядок |
flex-wrap | flex-wrap: wrap |
flex-nowrap | запретить перенос |
Выравнивание
| Класс | Ось | Результат |
|---|
justify-start | главная | к началу |
justify-center | главная | по центру |
justify-end | главная | к концу |
justify-between | главная | крайние к краям, остальные равномерно |
justify-around / justify-evenly | главная | равные промежутки |
items-start | поперечная | к началу |
items-center | поперечная | по центру |
items-end | поперечная | к концу |
items-baseline | поперечная | по базовой линии текста |
items-stretch | поперечная | растянуть (по умолчанию) |
self-start, self-center, self-end | поперечная | выравнивание одного элемента |
content-center, content-between | строки при переносе | многострочный flex |
Поведение элементов
| Класс | CSS | Смысл |
|---|
flex-1 | flex: 1 1 0% | занять свободное место |
flex-auto | flex: 1 1 auto | расти, учитывая содержимое |
flex-initial | flex: 0 1 auto | сжиматься, но не расти |
flex-none | flex: none | фиксированный размер |
grow / grow-0 | flex-grow | разрешить/запретить рост |
shrink / shrink-0 | flex-shrink | разрешить/запретить сжатие |
basis-0, basis-1/2, basis-64 | flex-basis | стартовый размер |
order-1, order-first, order-last | order | порядок отображения |
min-w-0 | min-width: 0 | разрешить сжатие ниже содержимого |
Готовые сочетания
| Задача | Классы |
|---|
| Центрировать содержимое | flex items-center justify-center |
| Шапка «лого — кнопки» | flex items-center justify-between |
| Иконка + текст в кнопке | inline-flex items-center gap-2 |
| Липкий футер | flex min-h-svh flex-col + flex-1 у контента |
| Колонка с промежутками | flex flex-col gap-4 |
| Правый блок прижат к краю | ms-auto у элемента |