The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Note that the value row and row-reverse are affected by the directionality of the flex container. 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;

/* Like <row>, but reversed */
flex-direction: row-reverse;

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

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;


The following values are accepted:

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.
Behaves the same as row but the main-start and main-end points are permuted.
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.
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;


Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification.
Last Call Working Draft Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]

10 -ms


7 -webkit

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? Not supported 12.10

Not supported

[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 is supported since Firefox 28.

See also

Document Tags and Contributors

Last updated by: fscholz,