MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

Резюме

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

Обратите внимание, что значения row и row-reverse зависят от направления flex-контейнера. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

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

See Using CSS flexible boxes for more properties and information.

Синтаксис

/* 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
The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
row-reverse
Behaves the same as row but the main-start and main-end points are permuted.
column
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
column-reverse
Behaves the same as column but the main-start and main-end are permuted.

Formal syntax

row | row-reverse | column | column-reverse

Примеры

element { 
  flex-direction: row-reverse;
}

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
Определение 'flex-direction' в этой спецификации.
Last Call Working Draft Initial definition

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

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1][2]
20.0 (20.0)
21.0-webkit

10 -ms
11

12.10

7 -webkit

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? Нет 12.10

Нет

[1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

[2] Multi-line flexbox are supported since Firefox 28.

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

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

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