Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Резюме

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

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

Начальное значениеrow
Применяется кflex-контейнеры
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

См. Using CSS flexible boxes для детализации по свойствам и дополнительной информации.

Синтаксис

/* The direction text is laid out in a line */
flex-direction: row;

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

/* The direction in which lines of text are stacked */
flex-direction: column;

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

/* Общие значения */
flex-direction: inherit;
flex-direction: initial;
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 поменяны местами.

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

row | row-reverse | column | column-reverse

Пример

element { 
  flex-direction: row-reverse;
}

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

Спецификация Статус Примечание
CSS Flexible Box Layout Module
Определение 'flex-direction' в этой спецификации.
Кандидат в рекомендации Initial definition

Поддержка браузеров

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Особенность Firefox (Gecko) Chrome Internet Explorer Opera Safari
Базовая поддержка 18.0 (18.0) (behind a pref) [1][2]
20.0 (20.0)
21.0-webkit

10 -ms
11

12.10

7 -webkit

Особенность Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Базовая поддержка ? ? Нет 12.10

Нет

[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на true.

[2] Многострочный flexbox поддерживается, начиная с Firefox 28.

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

Метки документа и участники

Внесли вклад в эту страницу: alxklochkov, fscholz, Sebastianz, Multysh, petanisimov
Обновлялась последний раз: alxklochkov,