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 2020.

* Learn more
* See full compatibility
* Report feedback
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. Это отрицательно влияет на пользователей с плохим зрением, использующих навигацию с помощью вспомогательных технологий, таких как программы чтения с экрана. Если визуальный порядок важен, пользователи программ чтения с экрана не будут иметь доступа к правильному порядку.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
### Формальное определение

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

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

flex-direction =   
  row             | (en-US)  
  row-reverse     | (en-US)  
  column          | (en-US)  
  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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* CSS `flex-flow` — краткая запись CSS-свойств `flex-direction` и `flex-wrap`.
* Руководство по CSS Flexbox: *Основные идеи Flexbox*
* Руководство по CSS Flexbox: *Упорядочивание flex-элементов (en-US)*