flex-direction

Обновлено: 29.03.2023

flex-direction

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Краткая информация

Значение по умолчанию row
Наследуется Нет
Применяется К флекс-контейнеру
Анимируется Нет

Синтаксис

flex-direction: row | row-reverse | column | column-reverse

Значения

row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
column Главная ось располагается вертикально и направлена сверху вниз.
column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

Пример

Объектная модель

Объект.style.flexDirection

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-direction.

Браузеры

flex-direction

Посмотреть совместимость на Can I use?

flex-direction