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 |
See Using CSS flexible boxes for more properties and information.
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
rowbut 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
columnbut 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 21 -webkit- | (Yes) (Yes) -webkit- | 201 18 — 202 49 -webkit- | 11 10 -ms- | 12.10 15 -webkit- | 9 7 -webkit- |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | ? | ? | (Yes) (Yes) -webkit- | ? | No | 12.10 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
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
zhuangyin,
Jeremie,
nctuhappytim,
pborenstein,
erikadoyle,
Sebastianz,
duncanmcdonald,
jigs12,
jsx,
TylerH,
braveknave,
wbamberg,
Golmote,
SaschaNaz,
PifyZ,
teoli,
Delapouite,
xaka,
SJW,
kscarfone,
Sheppy,
ethertank,
FredB,
scottrowe
Last updated by:
fscholz,