Главная и поперечная оси

В Flexbox главная ось (main axis) — направление, вдоль которого размещаются элементы; поперечная ось (cross axis) — перпендикулярна главной. Понимание осей определяет, какое свойство управляет каким направлением.

Зачем нужно

Большинство ошибок с justify-content и align-items происходят из-за непонимания осей. Оси не фиксированы: они меняются вместе с flex-direction. Зная оси, вы всегда понимаете, в какую сторону работает каждое свойство.

Где используется

  • Любая flex-раскладка — оси нужно держать в голове всегда
  • Центрирование элементов по обеим осям
  • Выравнивание в навигации, карточках, формах
  • Переключение с горизонтальной на вертикальную раскладку

Оси при разных flex-direction

/* flex-direction: row (по умолчанию) */
/* Главная ось: → (слева направо) */
/* Поперечная ось: ↓ (сверху вниз) */

/* flex-direction: row-reverse */
/* Главная ось: ← (справа налево) */
/* Поперечная ось: ↓ */

/* flex-direction: column */
/* Главная ось: ↓ (сверху вниз) */
/* Поперечная ось: → (слева направо) */

/* flex-direction: column-reverse */
/* Главная ось: ↑ (снизу вверх) */
/* Поперечная ось: → */

Какое свойство работает по какой оси

.container {
  display: flex;
  flex-direction: row; /* по умолчанию */

  /* Главная ось (→): */
  justify-content: center;    /* выравнивание элементов */
  
  /* Поперечная ось (↓): */
  align-items: center;        /* выравнивание элементов */
  align-content: space-between; /* выравнивание строк при flex-wrap */
}

Центрирование — наглядный пример

/* row: justify-content → горизонталь, align-items → вертикаль */
.center-row {
  display: flex;
  flex-direction: row;
  justify-content: center; /* горизонтально */
  align-items: center;     /* вертикально */
}

/* column: оси меняются! */
.center-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* вертикально (теперь главная!) */
  align-items: center;     /* горизонтально (поперечная) */
}

<div class="center-row">
  <div>Центрирован</div>
</div>

Диаграмма осей

flex-direction: row
     Main Axis →
  ┌───────────────────────┐
  │  [A]  [B]  [C]        │  ↑ Cross
  └───────────────────────┘  ↓ Axis

flex-direction: column
     Cross Axis →
  ┌──────┐
  │ [A]  │  ↑
  │ [B]  │  │ Main Axis
  │ [C]  │  ↓
  └──────┘

Частые ошибки

  1. justify-content при flex-direction: column — в column главная ось вертикальная, поэтому justify-content двигает элементы вертикально, а не горизонтально.
  2. align-items без высоты контейнера — при column align-items: center не даёт горизонтального центрирования, если у контейнера нет ширины.
  3. Забыть, что flex-wrap добавляет строки — при переносе align-items работает внутри строки, а align-content — между строками.

Связанные темы

Ресурсы