Урок 08. Старый vs Новый: float против flex

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

До Flexbox горизонтальные раскладки собирали на float и inline-block — с клирфиксами и борьбой с пробелами между тегами. Сейчас это два-три класса.

Раскладка «лого слева, меню справа»

❌ Эпоха float

.header::after { content: ""; display: table; clear: both; }
.header__logo { float: left; }
.header__nav  { float: right; }
.header__nav li { display: inline-block; margin-left: 16px; }

Плюс борьба с лишними пробелами между inline-block, плюс отдельные правила для вертикального выравнивания.

✅ Flexbox

Логотип

<header class="flex items-center justify-between rounded-lg bg-slate-100 px-4 py-3">
  <span class="text-sm font-semibold text-slate-900">Логотип</span>
  <nav class="flex gap-4 text-sm text-slate-600">
    <a href="#">Обзор</a><a href="#">Цены</a><a href="#">Контакты</a>
  </nav>
</header>

Вертикальное центрирование

❌ Трюк с трансформацией

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

✅ Два класса

<div class="flex items-center justify-center">…</div>

Что изменилось в самих утилитах

Раньше	Сейчас	Комментарий
`flex-grow-0`	`grow-0`	короче
`flex-shrink-0`	`shrink-0`	короче
`space-x-4`	`gap-4`	корректно работает при переносе
Отступы у детей	`gap` у родителя	меньше классов, нет «висящих» margin

Старые имена flex-grow-0 и flex-shrink-0 всё ещё встречаются в чужом коде и статьях — это версия v3. В новом коде пишите короткие.