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

0.33%

Edge

141

0.5%

142

3.72%

143

0.01%

Firefox

143

0.03%

144

0.61%

145

0.73%

146

147

Chrome

141

3.76%

142

11.18%

143

0.04%

144

0.01%

145

Safari

26.0

0.21%

26.1

0.23%

26.2

0.01%

Safari on iOS

18.4

0.12%

18.5-18.7

5.77%

26.0

0.56%

26.1

0.52%

Chrome for Android

142

41.86%

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

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

С префиксом

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

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

Примечание

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