flex-direction

Резюме

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.

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

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

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

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

• Using CSS flexible boxes