Как называются оси в 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 меняет оси местами.