Урок 25. Старый vs Новый: Практические шаблоны Flexbox

📁 Раздел: Flexbox ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#display #flex-direction #justify-content #align-items #flex-wrap #gap

⚡ Кратко

Раньше навбар и центрирование собирали из float, inline-block и margin-хаков — хрупко и многословно. Flexbox описывает намерение напрямую: «разведи по краям», «центрируй», «перенеси при нехватке места».

Навбар: до и после

Старый подход. Логотип и меню разводили через float и ручные отступы. Приходилось чистить float (clearfix), а вертикальное выравнивание было отдельной болью.

📄 lesson-25/old.css
.logo  { float: left; }
.menu  { float: right; }
.menu li { display: inline-block; margin-left: 20px; }
.navbar::after { content: ""; display: block; clear: both; }

Современный подход. Одна строка justify-content: space-between разводит блоки по краям, align-items: center выравнивает по вертикали. Никаких clearfix.

📄 lesson-25/new.css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
<nav class="navbar">
  <strong>Logo</strong>
  <div class="menu">…</div>
</nav>

Центрирование: до и после

Старый подход. Центрировать блок по вертикали было трудно: использовали position: absolute + transform: translate(-50%, -50%) или хаки с line-height/table-cell.

📄 lesson-25/old.css
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Современный подход. Две строки на контейнере — и блок по центру по обеим осям.

📄 lesson-25/new.css
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
}
По центру
<div class="hero">
  <div class="box">По центру</div>
</div>
Вывод: Flexbox не просто короче — он выражает намерение, поэтому код легче читать и поддерживать.

Навигация