7. Flexbox с Tailwind

Tailwind CSS: Flexbox

Flexbox — основной инструмент для расположения элементов в Tailwind. Почти любой UI-паттерн (навигация, карточки, кнопки с иконкой) делается через flex.

Базовые flex-классы

<!-- Включаем flex -->
<div class="flex">...</div>
<div class="inline-flex">...</div>

<!-- Направление -->
<div class="flex flex-row">Горизонтально (по умолчанию)</div>
<div class="flex flex-col">Вертикально</div>
<div class="flex flex-row-reverse">Горизонтально с конца</div>
<div class="flex flex-col-reverse">Вертикально с конца</div>

Justify Content (главная ось)

<div class="flex justify-start">По началу (по умолчанию)</div>
<div class="flex justify-center">По центру</div>
<div class="flex justify-end">По концу</div>
<div class="flex justify-between">Крайние по краям, остальные равномерно</div>
<div class="flex justify-around">Равные отступы вокруг каждого</div>
<div class="flex justify-evenly">Равные расстояния между всеми</div>

Align Items (поперечная ось)

<div class="flex items-start">По верху</div>
<div class="flex items-center">По центру (используется чаще всего)</div>
<div class="flex items-end">По низу</div>
<div class="flex items-stretch">Растянуть (по умолчанию)</div>
<div class="flex items-baseline">По базовой линии текста</div>

Wrap (перенос)

<div class="flex flex-nowrap">Не переносить (по умолчанию)</div>
<div class="flex flex-wrap">Переносить на следующую строку</div>
<div class="flex flex-wrap-reverse">Переносить в обратном порядке</div>

Grow и Shrink

<!-- Элемент занимает всё доступное место -->
<div class="flex">
  <div class="flex-1">Занимает максимум места</div>
  <div class="w-48">Фиксированная ширина</div>
</div>

<!-- flex-none — не растягивается и не сжимается -->
<div class="flex">
  <div class="flex-none w-32">Иконка (фикс.)</div>
  <div class="flex-1">Текст (растягивается)</div>
</div>

<!-- Конкретные значения grow/shrink -->
<div class="flex">
  <div class="grow">Растягивается</div>
  <div class="shrink-0">Не сжимается</div>
</div>

Self-выравнивание (для отдельных элементов)

<div class="flex items-start h-24">
  <div class="self-start">Вверху</div>
  <div class="self-center">По центру</div>
  <div class="self-end">Внизу</div>
  <div class="self-stretch">Растянут</div>
</div>

Order

<div class="flex">
  <div class="order-3">Визуально третий (в DOM — первый)</div>
  <div class="order-1">Визуально первый</div>
  <div class="order-2">Визуально второй</div>
</div>

Реальные UI-паттерны

Навигация:

<nav class="flex items-center justify-between px-6 py-4 bg-white border-b">
  <div class="flex items-center gap-2">
    <img src="logo.svg" class="w-8 h-8">
    <span class="font-semibold">Logo</span>
  </div>
  <div class="flex gap-6 text-sm text-gray-600">
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </div>
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
    Войти
  </button>
</nav>

Карточка с иконкой:

<div class="flex items-start gap-4 p-4">
  <div class="flex-none w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
    <svg>...</svg>
  </div>
  <div>
    <h3 class="font-semibold">Заголовок</h3>
    <p class="text-gray-500 text-sm">Описание</p>
  </div>
</div>

Практика