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;
<div class="grid"> <div class="col"> <div class="row"> <div class="cell"> row <div class="container row"> <span>A</span> <span>B</span> <span>C</span> </div> </div> <div class="cell"> row-reverse <div class="container row-reverse"> <span>A</span> <span>B</span> <span>C</span> </div> </div> </div> <div class="row"> <div class="cell"> column <div class="container column"> <span>A</span> <span>B</span> <span>C</span> </div> </div> <div class="cell"> column-reverse <div class="container column-reverse"> <span>A</span> <span>B</span> <span>C</span> </div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; min-height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1 auto; } .container { background: #E4F0F5; padding: .5rem; margin: 0 auto; font-size: 1rem; display:flex; width: 11rem; height: 11rem; } .container span { display: block; padding: 1em; margin: .25em; border: 1px solid black; background: #CCC; flex: 1; } .row { flex-direction: row; } .row-reverse { flex-direction: row-reverse; } .column { flex-direction: column; } .column-reverse { flex-direction: column-reverse; }
<div class="grid"> <div class="col"> <div class="row"> <div class="cell"> normal <div class="container normal"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> stretch <div class="container stretch"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> baseline <div class="container baseline"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> space-between <div class="container space-between"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> space-around <div class="container space-around"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> space-evenly <div class="container space-evenly"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> center <div class="container center"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> start <div class="container start"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> flex-start <div class="container flex-start"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> left <div class="container left"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> end <div class="container end"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> flex-end <div class="container flex-end"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> right <div class="container right"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> first baseline <div class="container first-baseline"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell warning" title="this feature is experimental and could not work in your browser"> last baseline <div class="container last-baseline"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> safe center <div class="container safe-center"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> <div class="cell"> unsafe center <div class="container unsafe-center"> <div class="item A">A</div> <div class="item B">B</div> <div class="item C">C</div> </div> </div> </div> <div class="note"> The exact behavior of the align-items property is highly bound to some other properties: <div class="row"> <div class="code flex"> <code>.container {</code> <code> justify-content: /* See above */;</code> <code> display:<select id="display"><option>flex</option><option>grid</option><option>block</option></select>;</code> <code class="flex"> flex-direction:<select id="flexDirection"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select>;</code> <code class="flex"> direction:<select id="direction"><option>ltr</option><option>rtl</option></select>;</code> <code class="grd"> grid-template-columns: repeat(auto-fill, 33%);</code> <code>}</code> </div> <div class="code"> <code>.item {</code> <code> width: <select id="width"><option>auto</option><option>1.5em</option></select></code> <code> height: <select id="height"><option>auto</option><option>1.5em</option></select></code> <code> position: <select id="position"><option>static</option><option>absolute</option></select></code> <code>}</code> </div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; width: 10.5em; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } .note .row { justify-content: flex-start; margin-top: .5rem; } .code { margin-right: 1em; line-height: 2.5; } code { display: block; } .warning { background: #EEDDDD; } .warning::before { content: "\26A0\FE0F "; } .container { display: flex; background: #000; width: 10.5em; height: 10.5em; max-width: 10.5em; max-height: 10.5em; grid-template-columns: repeat(auto-fill, 33%); overflow: hidden; resize: both; } .item { background: #E4F0F5; box-sizing: border-box; padding: .5em; margin: 1px; } .A { font-size: .8rem; } .B { font-size: 1.8rem; } .C { font-size: 1.3rem; } .normal { justify-content: normal; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .space-evenly { justify-content: space-evenly; } .stretch { justify-content: stretch; } .center { justify-content: center; } .start { justify-content: start; } .end { justify-content: end; } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .left { justify-content: left; } .right { justify-content: right; } .baseline { justify-content: baseline; } .first-baseline { justify-content: first baseline; } .last-baseline { justify-content: last baseline; } .safe-center { justify-content: safe center; } .unsafe-center { justify-content: unsafe center; }
window.addEventListener('load', function () { var select = Array.from(document.querySelectorAll('select')); var container = Array.from(document.querySelectorAll('.container')); var item = Array.from(document.querySelectorAll('.item')); function getData() { return select.reduce(function (obj, field) { obj[field.id] = field.value return obj }, {}); } window.addEventListener('input', function () { var data = getData(); container.forEach(function (c) { c.style.display = data.display; c.style.direction = data.direction; c.style.flexDirection = data.flexDirection; }) item.forEach(function (c) { c.style.width = data.width; c.style.height = data.height; c.style.position = data.position; }) }); })
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 |
Syntax
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 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>
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 | 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.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items