We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Резюме

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-контейнеры
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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' в этой спецификации.
Кандидат в рекомендации 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!

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,