PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Как называются оси в flexbox?

Продвинутые темы

Оси во Flexbox называются: главная ось (main axis) и поперечная ось (cross axis). Направление главной оси задаёт `flex-direction`.

Две оси

Главная ось (main axis)

Направление, вдоль которого располагаются flex-элементы. Задаётся flex-direction:

  • row (по умолчанию) — главная ось горизонтальная (слева направо).
  • column — главная ось вертикальная (сверху вниз).

Поперечная ось (cross axis)

Перпендикулярна главной:

  • При row — поперечная вертикальная.
  • При column — поперечная горизонтальная.
flex-direction: row
main axis: →  (горизонталь)
cross axis: ↓ (вертикаль)

flex-direction: column
main axis: ↓  (вертикаль)
cross axis: → (горизонталь)

Выравнивание по осям

По главной оси

justify-content: center | space-between | flex-start | flex-end;

По поперечной оси

align-items: center | stretch | flex-start | flex-end; /* все элементы */
align-content: ...; /* строки при переносе */
align-self: ...;    /* отдельный элемент */

Главное

Смена flex-direction меняет местами оси, поэтому justify-content и align-items работают в разных направлениях в зависимости от row/column.

Коротко для собеседования

Оси Flexbox: главная (main axis) — вдоль неё располагаются элементы (задаётся flex-direction: row — горизонталь, column — вертикаль) и поперечная (cross axis) — перпендикулярна главной. По главной выравнивают justify-content, по поперечной — align-items/align-content/align-self. Смена flex-direction меняет оси местами.

Другие вопросы раздела