Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.

Основные утилиты

Включение flex

• flex — делает контейнер flex-контейнером.
• inline-flex — то же самое, но контейнер остаётся строчным элементом.

Направление элементов

• flex-row — элементы в строку (по умолчанию).
• flex-col — элементы в колонку.
• flex-row-reverse, flex-col-reverse — обратный порядок.

Выравнивание

• justify-* — выравнивание по горизонтали: start, end, center, between, around, evenly.
• items-* — выравнивание по вертикали: start, end, center, stretch, baseline.
• self-* — индивидуальное выравнивание для элемента (перекрывает общее правило).

Отступы

• gap-* — промежутки между элементами (например, gap-4 = 16px).

Примеры использования

Центрирование блока

<div class="flex items-center justify-center h-64 bg-gray-100">
  <p class="text-lg font-medium">По центру</p>
</div>

Здесь элемент оказывается ровно по центру контейнера — и по горизонтали, и по вертикали.

Хедер с меню

<header class="flex justify-between items-center p-4 bg-white shadow">
  <h1 class="text-xl font-bold text-brand">MySite</h1>
  <nav class="flex gap-4">
    <a href="#" class="text-gray-600 hover:text-brand">Главная</a>
    <a href="#" class="text-gray-600 hover:text-brand">О нас</a>
    <a href="#" class="text-gray-600 hover:text-brand">Контакты</a>
  </nav>
</header>

Логотип слева, навигация справа. Ссылки равномерно распределены благодаря gap-4.

Вертикальный список

<div class="flex flex-col gap-2 bg-gray-50 p-4 rounded">
  <div class="bg-gray-200 p-2">Элемент 1</div>
  <div class="bg-gray-200 p-2">Элемент 2</div>
  <div class="bg-gray-200 p-2">Элемент 3</div>
</div>

Блоки идут друг под другом с одинаковыми промежутками. Отличный вариант для мобильных меню.

Кнопка по центру

<footer class="p-6 bg-gray-100">
  <div class="flex justify-center">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">
      Подписаться
    </button>
  </div>
</footer>

Простейший приём: контейнер делает flex, а justify-center ставит кнопку в центр.

Адаптивные макеты

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-gray-200 p-4 flex-1">Блок 1</div>
  <div class="bg-gray-200 p-4 flex-1">Блок 2</div>
  <div class="bg-gray-200 p-4 flex-1">Блок 3</div>
</div>

На мобильных — вертикальные колонки, на десктопах — горизонтальный ряд. Классы flex-1 делят доступное пространство поровну.

Зачем использовать Flex в Tailwind

• Простота: не нужно писать CSS вручную — всё видно в классе.
• Скорость: комбинацией 2–3 утилит решаются типичные задачи (центрирование, меню, сетка).
• Адаптивность: легко переключать направление с помощью префиксов sm:, md:, lg:.
• Чистый код: нет «магических» стилей, всё на поверхности.

Упражнения

1. Сделай хедер с логотипом слева и кнопкой «Войти» справа, используя flex justify-between items-center.
2. Переделай этот же хедер так, чтобы на мобильных (flex-col) логотип и кнопка были в колонку, а на десктопах (md:flex-row) — в строку.
3. Создай контейнер с тремя блоками: на мобильных они идут вертикально, а на lg: выстраиваются в строку.

Итог

Flexbox в Tailwind активируется утилитой flex. Классы justify-* управляют расположением по горизонтали, items-* — по вертикали, а gap-* упрощают отступы. Благодаря брейкпоинтам можно легко создавать адаптивные макеты: flex-col md:flex-row.

👉 В следующей статье (№7) разберём Grid-сетки и соберём на них карточки.