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

flex-direction — это свойство CSS, которое задаёт расположение flex-элементов во flex-контейнере, определяя главную ось и направление (обычное или обратное).

Попробуйте

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

Синтаксис

/* Keyword values */
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

row

Задаёт главную ось flex-контейнера параллельно направлению текста. Это значение по умолчанию.

row-reverse

Работает так же, как row, но задаёт обратное направление содержимого, размещая первый элемент у края inline-end.

column

Задаёт главную ось flex-контейнера параллельно блочной оси.

column-reverse

Работает так же, как column, но задаёт обратное направление содержимого, размещая первый элемент у края block-end.

Описание

Свойство flex-direction позволяет задать расположение flex-элементов во flex-контейнере, устанавливая главную ось контейнера и направление flex-элементов. Это свойство применимо только к элементам-контейнерам, у которых свойство display имеет значение flex или inline-flex. Свойство flex-direction вместе со свойством flex-wrap следует задавать с помощью сокращённого свойства flex-flow.

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

Значение по умолчанию — row. По умолчанию или если явно задано значение row, главная ось flex-контейнера определяется параллельно направлению текста. Первый flex-элемент в порядке DOM размещается у краёв inline-start и block-start. Следующие элементы размещаются у края inline-end предыдущего элемента. Дополнительные строки, если для контейнера задан перенос с помощью flex-wrap: wrap, добавляются у края block-end. Точки начала главной оси и конца главной оси совпадают с направлением содержимого: начало главной оси находится у края inline-start, а конец — у края inline-end. Начало и конец поперечной оси находятся соответственно у краёв block-start и block-end.

Значение row-reverse используется для изменения направления по строчной оси. Оно работает как row, но в обратном направлении. Первый элемент размещается у краёв inline-end и block-start, следующие flex-элементы — у края inline-start предыдущего элемента, а дополнительные строки добавляются у края block-end. Точки начала и конца главной оси совпадают соответственно с краями inline-end и inline-start режима письма, а начало и конец поперечной оси — с краями block-start и block-end.

Если для flex-direction задано значение column, главной осью становится блочная ось. Как и при значении row, первый элемент размещается у краёв inline-start и block-start, но следующие элементы размещаются у края block-end предыдущего элемента, а не у края по строчной оси. Если задан перенос, дополнительные столбцы добавляются у края inline-end. Точки начала и конца главной оси определяются направлением блочной оси режима письма: начало главной оси находится у края block-start, а конец — у края block-end. Начало и конец поперечной оси находятся соответственно у краёв inline-start и inline-end.

При значении column-reverse главной осью также является блочная ось, но отсчёт начинается от края block-end. Первый элемент размещается у краёв inline-start и block-end, а следующие элементы — у края block-start предыдущего элемента. Если задан перенос, дополнительные столбцы добавляются у края inline-end. Точки начала и конца главной оси определяются направлением блочной оси режима письма: начало главной оси находится у края block-end, а конец — у края block-start. Начало и конец поперечной оси находятся соответственно у краёв inline-start и inline-end.

На значения row и row-reverse влияет направление flex-контейнера. Если его атрибут dir имеет значение ltr, row обозначает горизонтальную ось, направленную слева направо, а row-reverse — справа налево. Если атрибут dir имеет значение rtl, row обозначает ось, направленную справа налево, а row-reverse — слева направо.

Доступность

Использование свойства flex-direction со значениями row-reverse или column-reverse приводит к несоответствию между визуальным представлением содержимого и порядком элементов в DOM. Это негативно сказывается на работе пользователей со слабым зрением, которые перемещаются по странице с помощью вспомогательных технологий, например программы чтения с экрана. Если визуальный порядок (CSS) важен, пользователи программ чтения с экрана не смогут получить доступ к правильному порядку чтения.

• Порядок в исходном коде имеет значение — Adrian Roselli (2015)
• Flexbox и несоответствие порядка клавиатурной навигации — Léonie Watson (2016)
• Понимание критерия 1.3.2: осмысленная последовательность — WCAG 2.2 (2023)

Формальное определение

Формальный синтаксис

flex-direction = 
  row |
  row-reverse |
  column |
  column-reverse

Примеры

Обратный порядок столбцов и строк flex-контейнера

HTML

<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>

CSS

.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• сокращённое свойство flex-flow
• flex-wrap
• gap
• Основные понятия flexbox
• Порядок flex-элементов
• модуль компоновки CSS Flexible Box