Урок 23. Старый vs Новый: Главная и поперечная оси

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

⚡ Кратко

Выравнивание и распределение блоков раньше делали хаками (float, text-align, margin: auto, абсолютное позиционирование). Flexbox решает это одной-двумя строками: justify-content и align-items.

Задача 1. Центрировать блок по горизонтали и вертикали

Старый приём: абсолютное позиционирование + сдвиг через transform — хрупко, требует ровно знать размеры родителя.

/* lesson-23/old.css */
.parent { position: relative; height: 200px; }
.box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

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

по центру
/* lesson-23/new.css */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

Задача 2. Распределить элементы в ряд с равными промежутками

Старый приём: inline-block + text-align: justify или ручные margin — капризно, появляются «лишние» пробелы между inline-блоками.

/* lesson-23/old.css */
.bar { text-align: justify; }
.item { display: inline-block; }

Современно: одно значение justify-content.

1
2
3
/* lesson-23/new.css */
.bar { display: flex; justify-content: space-between; }
Flexbox описывает намерение («выровнять по центру», «раздать промежутки») напрямую, вместо обходных трюков с позиционированием и inline-блоками.

Навигация