Если вы застали времена float: left и clear: both, вы помните боль. А уж попытки вертикально выровнять блок по центру... это были темные времена хаков с position: absolute и transform: translate.

Забудьте об этом. Сегодня у нас есть Flexbox. Это современная модель компоновки CSS, которая делает выравнивание элементов интуитивно понятным. А в связке с Tailwind CSS — еще и молниеносно быстрым.

В этом руководстве мы разберем 90% всего, что вам нужно знать о Flexbox, на практических примерах классов Tailwind.

Основы: Контейнер и Оси

Чтобы Flexbox заработал, вам нужно две вещи: контейнер и элементы внутри него.

Первое, что мы делаем, — говорим контейнеру, что он теперь "гибкий".

Класс Tailwind: flex
CSS: display: flex;

Как только вы это сделали, все дочерние элементы выстраиваются в ряд. Это называется Главная Ось (Main Axis). По умолчанию она идет слева направо. Ось, которая идет сверху вниз, называется Поперечная Ось (Cross Axis).

Вы можете изменить направление Главной Оси:

  • flex-row — (по умолчанию) Главная ось горизонтальная.
  • flex-col — Главная ось становится вертикальной.

Выравнивание по Главной Оси: `justify-content`

Это свойство отвечает за то, как элементы располагаются вдоль главной оси (по горизонтали, если у вас flex-row). Это ответ на 90% вопросов "как сдвинуть вбок".

1. justify-start (по умолчанию)
Прижимает элементы к началу.

<div class="flex justify-start bg-slate-800 p-4">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

2. justify-center (Центр!)
Выравнивает элементы по центру главной оси.

<div class="flex justify-center bg-slate-800 p-4">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

3. justify-end
Прижимает элементы к концу.

<div class="flex justify-end bg-slate-800 p-4">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

4. justify-between
Самый популярный! Равномерно распределяет элементы. Первый — у начала, последний — у конца.

<div class="flex justify-between bg-slate-800 p-4">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
  <div class="w-16 h-16 bg-purple-500">3</div>
</div>

Выравнивание по Поперечной Оси: `align-items`

Это свойство отвечает за выравнивание поперек главной оси (по вертикали, если у вас flex-row).

1. items-start
Прижимает элементы к верху.

<div class="flex items-start bg-slate-800 p-4 h-32">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

2. items-center (Вертикальный центр!)
Выравнивает элементы по центру поперечной оси.

<div class="flex items-center bg-slate-800 p-4 h-32">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

3. items-end
Прижимает элементы к низу.

<div class="flex items-end bg-slate-800 p-4 h-32">
  <div class="w-16 h-16 bg-pink-500">1</div>
  <div class="w-16 h-16 bg-cyan-500">2</div>
</div>

Святой Грааль: Как выровнять блок по центру?

Вот он. Тот самый запрос, который мучает новичков. Как идеально отцентрировать один элемент внутри другого (и по горизонтали, и по вертикали)?

С Flexbox это делается одной строкой:

<!-- 
  Родителю задаем:
  - 'flex' — включаем Flexbox
  - 'justify-center' — центрируем по Главной оси (горизонталь)
  - 'items-center' — центрируем по Поперечной оси (вертикаль)
  - 'h-screen' (или любая высота) — даем ему высоту
-->
<div class="flex justify-center items-center h-screen bg-slate-900">
  <div class="w-32 h-32 bg-pink-500 rounded-lg text-white flex items-center justify-center">
    Я ИДЕАЛЬНО В ЦЕНТРЕ!
  </div>
</div>

А что насчет `css grid`?

Запомните простое правило:

  • Flexbox — для одномерных макетов (одна строка ИЛИ одна колонка). Идеально для навигации, карточек, кнопок.
  • Grid — для двумерных макетов (и строки, И колонки одновременно). Идеально для раскладки всей страницы.

Мы только что разобрали Flexbox. А для создания полноценных сеток для всего сайта читайте:
CSS Grid: Полное руководство по раскладке сайта.