flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Интерактивный пример

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

Синтаксис

css
/* Направление, в котором блоки будут располагаться в строку */
flex-direction: row;

/* Как <row>, но наоборот */
flex-direction: row-reverse;

/* Направление, в котором блоки будут располагаться в виде столбца */
flex-direction: column;

/* Как <column>, но наоборот */
flex-direction: column-reverse;

/* Общие значения */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

Значения

Может принимать следующие значения:

row

Главная ось flex-контейнера определена точно так же, как направление текста. Точки main-start и main-end совпадают с направлением контента.

row-reverse

Ведёт себя аналогично row, но точки main-start и main-end переставлены местами.

column

Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки main-start и main-end такие же, как точки before и after режима записи (writing-mode).

column-reverse

Ведёт себя как column, но точки main-start и main-end переставлены местами.

Доступность

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

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

Начальное значениеrow
Применяется кflex-контейнеры
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

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

Примеры

Использование column-reverse и row-reverse

HTML

html
<h4>Пример flex-direction: 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>Пример flex-direction: 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

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;
}

Результат

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

Specification
CSS Flexible Box Layout Module Level 1
# flex-direction-property

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-direction
column
column-reverse
row
row-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Смотрите также