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

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.