Урок 22. Старый vs Новый: Введение во Flexbox

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

⚡ Кратко

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

Старый подход: inline-block + фиксированные ширины

До Flexbox ряд элементов собирали через inline-block или float: приходилось вручную задавать ширины, бороться с пробелами между inline-block, выравнивать через vertical-align и раздвигать элементы margin-хаками.

📄 lesson-22/old.css
.card {
  display: inline-block;
  width: 16rem;
  margin-right: 1rem;
  vertical-align: top;
}
1 2 (выше) 3 
/* верх не выровнять без vertical-align,
   центрирование по высоте — отдельная боль */

Современный подход: Flexbox

Flexbox описывает намерение напрямую: контейнер, направление, промежутки и выравнивание. Высоты элементов выравниваются автоматически, центрирование по обеим осям — две строки.

📄 lesson-22/new.css
.cards {
  display: flex;
  align-items: center;   /* выравнивание по высоте — бесплатно */
  gap: 1rem;             /* промежутки без margin-хаков */
}
1
2 (выше)
3
/* выровнено по центру, промежутки ровные,
   ширины распределены через flex: 1 */

Навигация