Теория — Урок 23

Главная идея

Как только вы пишете display: flex, у контейнера появляются две оси: главная (main axis) — вдоль неё выкладываются дочерние элементы, и поперечная (cross axis) — перпендикулярная ей. Почти все свойства выравнивания во Flexbox работают относительно этих осей, а не «лево/право/верх/низ». Поэтому, чтобы управлять раскладкой, сначала надо понять, где сейчас какая ось.

Представьте рейку (планку), вдоль которой вы нанизываете бусины. Главная ось — это сама рейка: бусины едут вдоль неё (justify-content сдвигает их влево, вправо, к центру или раздаёт между ними промежутки). Поперечная ось — это толщина рейки: можно прижать бусины к верхнему краю, к нижнему или растянуть на всю высоту (align-items). Повернёте рейку вертикально (flex-direction: column) — и «вдоль» с «поперёк» меняются местами, хотя свойства те же самые.

Как работает: смена осей при row → column

Направление главной оси задаёт flex-direction. Значение по умолчанию — row (слева направо). При column элементы выстраиваются сверху вниз, и обе оси поворачиваются на 90°:

Синяя стрелка — главная ось (по ней работает justify-content), оранжевая — поперечная (по ней работает align-items). При column они меняются местами.

Два свойства выравнивания

Запомнить, какое свойство какую ось двигает, проще всего так:

justify-content — распределяет элементы и свободное место вдоль главной оси. Значения: flex-start (по умолчанию), center, flex-end, space-between, space-around, space-evenly.
align-items — выравнивает элементы поперёк (по cross-оси). Значения: stretch (по умолчанию), flex-start, center, flex-end, baseline.

Перенос на новые линии: flex-wrap

По умолчанию flex-wrap: nowrap — все элементы стоят в одну линию и сжимаются, лишь бы поместиться. flex-wrap: wrap разрешает перенос: когда места не хватает, элементы переходят на новую линию вдоль главной оси.

/* lesson-23/styles.css */
.gallery {
  display: flex;
  flex-direction: row;     /* главная ось — горизонталь */
  justify-content: center; /* центрируем вдоль главной */
  align-items: stretch;    /* растягиваем по поперечной */
  flex-wrap: wrap;         /* разрешаем перенос */
}

Когда применять

Flexbox — для одномерных раскладок: ряд кнопок, навигация в шапке, карточки в ряд, центрирование блока. Все три свойства этого урока (flex-direction, justify-content, align-items) задаются на контейнере, а влияют на расположение дочерних элементов.

Частая ошибка

Новички путают, какое свойство по какой оси работает, и при flex-direction: column пытаются центрировать по горизонтали через justify-content — а оно при column двигает по вертикали. Всегда сначала определите направление главной оси, и только потом выбирайте свойство.

Проверка: откройте DevTools, выделите flex-container и включите Flexbox overlay — браузер подсветит направление осей и промежутки.

Урок 23. Теория: Главная и поперечная оси