Как работает flex-direction и как он влияет на justify-content и align-items?

Question

flex-direction задает направление главной оси (row — горизонтально, column — вертикально).justify-content выравнивает элементы по главной оси.align-items выравнивает по поперечной оси.

YeaHub · Accepted Answer

1. Оси в Flexbox:Главная ось: Направление, заданное flex-direction (по умолчанию row).Поперечная ось: Перпендикулярна главной.Примеры:Случай 1: flex-direction: rowГлавная ось → горизонталь.justify-content: center → центрирует по горизонтали.align-items: center → центрирует по вертикали.Случай 2: flex-direction: columnГлавная ось → вертикаль.justify-content: center → центрирует по вертикали.align-items: center → центрирует по горизонтали.Визуализация:flex-direction: row          flex-direction: column
[ → → → → ] (главная)       [ ↑ (главная)
[ ↓ ] (поперечная)           [ → ] (поперечная)Вывод:Направление flex-direction меняет логику работы justify-content и align-items.