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).
/* 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;
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 |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The following values are accepted:
row
row-reverse
row
but the main-start and main-end points are permuted.column
column-reverse
column
but the main-start and main-end are permuted.row | row-reverse | column | column-reverse
<h4>This is a Column-Reverse</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> </div> <h4>This is a Row-Reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">A</div> <div class="box1" style="background-color:lightblue;">B</div> <div class="box1" style="background-color:yellow;">C</div> </div>
#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; }
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-direction' in that specification. | Candidate Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 21 -webkit- |
Yes Yes -webkit- |
201 18 — 202 49 -webkit- |
11 10 -ms- |
12.1 15 -webkit- |
9 7 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? |
Yes Yes -webkit- |
? | No |
12.1 15 -webkit- |
? |
1. Since Firefox 28, multi-line flexbox is supported.
2. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction