Flexbox: ряды и выравнивание

Главный инструмент выравнивания: строим ряды, центрируем и распределяем пространство.

Flexbox раскладывает детей вдоль одной оси и даёт точное управление их выравниванием и распределением свободного места.

Включаем flex и задаём направление

Класс flex на контейнере выстраивает детей в ряд. flex-col меняет направление на столбец:

<div class="flex">...в ряд...</div>
<div class="flex flex-col">...в столбец...</div>

justify — вдоль главной оси

justify-* распределяет детей вдоль главной оси (по горизонтали при обычном flex):

Класс	Эффект
`justify-start`	прижать к началу
`justify-center`	по центру
`justify-between`	по краям, зазор поровну между ними
`justify-end`	прижать к концу

justify-between — рабочая лошадка шапки сайта: логотип слева, меню справа.

<header class="flex justify-between">
  <div>Логотип</div>
  <nav>Меню</nav>
</header>

Логотип уйдёт к левому краю, меню — к правому, а пространство между ними распределится автоматически.

items — поперёк оси

items-* выравнивает детей по поперечной оси (по вертикали при горизонтальном ряду). Самый частый — items-center, центрирующий по вертикали:

<div class="flex items-center">
  <img class="w-8 h-8 rounded-full" src="a.jpg" alt="">
  <span>Имя пользователя</span>
</div>

Аватар и имя выровняются по центру по высоте — не «съедут» друг относительно друга.

Идеальное центрирование

Связка flex items-center justify-center ставит содержимое ровно в центр блока — и по горизонтали, и по вертикали:

<div class="flex items-center justify-center h-32">
  По центру
</div>

Текст окажется точно в середине блока высотой 128px.

gap — зазоры между детьми

gap-* задаёт расстояние между flex-детьми — чище, чем margin на каждом:

<div class="flex gap-4">
  <button>Один</button>
  <button>Два</button>
</div>

Между кнопками появится зазор 16px.

flex-1 — растянуть на свободное место

flex-1 заставляет ребёнка занять всё доступное пространство. Удобно, когда нужно, чтобы один блок «растягивался», а соседи занимали лишь свою ширину:

<div class="flex gap-2">
  <input class="flex-1 border rounded px-2">
  <button>Найти</button>
</div>

Поле ввода растянется на всю свободную ширину, а кнопка останется компактной.

Итог

flex строит ряд, flex-col — столбец.
justify-* — вдоль главной оси, items-* — поперёк; items-center justify-center центрирует идеально.
gap-* — зазоры между детьми, flex-1 — растянуть ребёнка на свободное место.