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.06%

0.5%

Edge

121

0.2%

122

3.96%

123

0.31%

Firefox

122

0.06%

123

1.09%

124

0.45%

125

126

Chrome

121

1.69%

122

12.58%

123

3.51%

124

0.02%

125

Safari

17.2

0.28%

17.3

1.12%

17.4

0.22%

17.5

Safari on iOS

17.2

0.61%

17.3

7.43%

17.4

1.09%

17.5

Chrome for Android

123

42.29%

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

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

С префиксом

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

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

Примечание

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