CSS-свойство flex-direction

Свойство flex-direction устанавливает главную ось flex-контейнера — направление, вдоль которого располагаются его flex-элементы. Переключая главную ось между горизонтальной и вертикальной (с возможным реверсом), одно свойство контролирует, будут ли элементы выстраиваться в строку или в столбец. Это одно из свойств CSS3, входящее в модуль Flexible Box Layout.

Само по себе это свойство не имеет эффекта — элемент должен сначала стать flex-контейнером, что достигается с помощью display: flex (или inline-flex). После этого каждый прямой потомок становится flex-элементом, следующим выбранному направлению.

Flex-элементы могут отображаться:

горизонтально слева направо (flex-direction: row) или справа налево (flex-direction: row-reverse)
вертикально сверху вниз (flex-direction: column) или снизу вверх (flex-direction: column-reverse)

Главная ось и поперечная ось

Flexbox всегда работает с двумя осями. Главная ось — та, которую выбирает flex-direction; элементы размещаются последовательно вдоль неё. Поперечная ось перпендикулярна ей. Это важно, поскольку свойства выравнивания зависят от того, какая ось является главной:

justify-content выравнивает элементы вдоль главной оси.
align-items выравнивает элементы вдоль поперечной оси.

Таким образом, при flex-direction: column главная ось становится вертикальной — и justify-content теперь управляет вертикальным позиционированием, а align-items — горизонтальным. Путаница с этими свойствами — самая распространённая ошибка при работе с Flexbox, и она почти всегда связана с тем, какое значение flex-direction используется в данный момент.

Значения *-reverse меняют порядок отображения элементов, но не меняют порядок в исходном HTML — это важно для доступности, поскольку программы чтения с экрана и фокус клавиатуры по-прежнему следуют порядку DOM, а не визуальному.

Информация

Если flex-элементов нет (у контейнера нет прямых потомков), свойство flex-direction не имеет видимого эффекта.

Начальное значение	row
Применяется к	Flex-контейнерам.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
DOM-синтаксис	object.style.flexDirection = "row-reverse";

Синтаксис

Синтаксис CSS-свойства flex-direction

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Пример свойства flex-direction:

Пример CSS-свойства flex-direction со значением column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Попробуйте сами »

В следующем примере элементы отображаются горизонтально в строку справа налево.

Пример свойства flex-direction со значением «row-reverse»:

Пример CSS-свойства flex-direction со значением row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

На следующем изображении показаны элементы, отображённые в обратном порядке справа налево.

Пример свойства flex-direction со значением «row»:

Пример свойства flex-direction со значением «row»

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства flex-direction со значением «column»:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства flex-direction со значением «column-reverse»:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Попробуйте сами »

Когда использовать каждое значение

row (по умолчанию) — горизонтальные навигационные панели, группы кнопок и любые «списки элементов слева направо». Явно задавать это значение почти никогда не требуется, поскольку оно используется по умолчанию.
column — вертикальное размещение карточек, полей формы или элементов боковой панели с сохранением возможностей выравнивания Flexbox и управления gap. Распространённый паттерн — макет на всю высоту страницы: display: flex; flex-direction: column; min-height: 100vh с шапкой, основной областью flex: 1 и подвалом.
row-reverse / column-reverse — изменение визуального порядка без правки HTML, например зеркальное отражение макета для языков с написанием справа налево или отображение новейшего сообщения чата внизу при сохранении DOM в хронологическом порядке.

Связанное сокращение flex-flow задаёт flex-direction и flex-wrap одним объявлением — удобно, когда нужно также разрешить перенос элементов на несколько строк.

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

flex-direction поддерживается во всех современных браузерах без вендорных префиксов. Оно является частью модели Flexbox, подробно рассмотренной в Полном руководстве по Flexbox.

Значения

Значение	Описание	Попробовать
row	Элементы отображаются горизонтально в строку. Это значение по умолчанию.	Попробовать »
row-reverse	Элементы отображаются в строку в обратном порядке (справа налево).	Попробовать »
column	Элементы отображаются вертикально сверху вниз.	Попробовать »
column-reverse	Элементы отображаются вертикально снизу вверх.	Попробовать »
initial	Свойство принимает значение по умолчанию.	Попробовать »
inherit	Свойство наследует значение от родительского элемента.	Попробовать »

Практика

Какие из следующих значений являются допустимыми для CSS-свойства flex-direction?

RowColumnRow-reverseColumn-reverseBlockInline