CSS flex-direction

Свойство flex-direction - определяет направление основной оси, таким образом определяя расположение элементов внутри Flex-контейнера

Общие сведения

Основная ось Flex-контейнера - это первичная ось вдоль которой расположены Flex-элементы. Будь осторожны, потому что она не всегда горизонтальная и её направление зависит от свойства flex-direction.

Синтаксис свойства

Синтаксис:

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

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

Значения свойства

row - направление такое же как у текста.
row-reverse - направление обратное направлению текста.
column - такое же как и row, только сверху вниз.
column-reverse - такое же как и row-reverse, только сверху вниз.

Поддержка браузерами

CSS Flexible Box Layout Module

0.03%

0.44%

Edge

133

1.34%

134

3.03%

135

Firefox

135

0.35%

136

1.12%

137

0.01%

138

139

Chrome

133

5.89%

134

9.92%

135

0.02%

136

0.01%

137

Safari

18.2

0.06%

18.3

1.4%

18.4

0.02%

18.5

Safari on iOS

18.2

0.41%

18.3

8.47%

18.4

0.13%

18.5

Chrome for Android

135

44.68%

Полная поддержка

Частичная поддержка

С префиксом

Не поддерживается

Данные с сервиса caniuse.com

Примечание

Обратите внимание, что на row и row-reverse влияет направленность Flex-контейнера. Если направление текста во Flex-контейнере ltr, то row представляется по горизонтальной оси ориентированный слева направо, а row-reverse справа налево. Если направление rtl, то наоборот.