Урок 24. Старый vs Новый: Выравнивание: justify-content, align-items, gap

📁 Раздел: Flexbox ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#align-items #align-content #gap #row-gap #align-self #flex-grow #flex-shrink #flex-basis

⚡ Кратко

Промежутки между флекс-элементами раньше делали через margin с обнулением у последнего. Сейчас — один gap на контейнере. Вертикальное центрирование раньше требовало хаков — теперь это align-items: center.

Промежутки: margin-хак → gap

Старый подход. margin справа у каждого элемента, и приходится обнулять его у последнего, иначе появляется лишний отступ у края. Легко забыть и получить «съехавшую» строку.

A B C
📄 lesson-24/old.css
.toolbar__item { margin-right: 16px; }
.toolbar__item:last-child { margin-right: 0; } /* костыль */

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

Современно. Один gap на контейнере — расстояние только между элементами, без отступа у краёв и без обнуления у последнего.

A B C
📄 lesson-24/new.css
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;     /* одно правило вместо margin-хаков */
}
Бонус: gap работает и в Grid, и в Flexbox одинаково, поэтому один и тот же приём годится для любых раскладок.

Навигация