Summary
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.
Initial value | row |
---|---|
Applies to | flex containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Using CSS flexible boxes for more properties and information.
Syntax
/* 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;
Values
The following values are accepted:
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
Example
HTML
<h4>This is a Column-Reverse</h4> <div id="content"> <div id="box" style="background-color:red;">A</div> <div id="box" style="background-color:lightblue;">B</div> <div id="box" style="background-color:yellow;">C</div> </div> <h4>This is a Row-Reverse</h4> <div id="content1"> <div id="box1" style="background-color:red;">A</div> <div id="box1" style="background-color:lightblue;">B</div> <div id="box1" style="background-color:yellow;">C</div> </div>
CSS
#content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } #box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; } #box1 { width: 50px; height: 50px; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-direction' in that specification. |
Candidate Recommendation | 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] |
21.0-webkit |
10 -ms |
12.10 |
7 -webkit |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | No support | 12.10 |
No support |
[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.
In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.