flex-direction
specifies the the pack direction of flex items.
Items can be packed row-wise, column-wise, and in reverse order.
By default, flex items are packed in rows.
A flex container with flex-direction
set to column
.
The items are packed in a column-first fashion.
<style>
.flex-direction {
background-color: #776fac;
padding: 5px;
display: flex;
flex-direction: column;
}
.flex-direction > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-direction">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
flex-direction: row | row-reverse | column | column-reverse | initial |inherit;
Value | Description |
---|---|
row | Default. Flex items are placed horizontally in a row. |
row-reverse | Same as row, but in reverse order. |
column | Flex items are placed vertically in a column. |
column-reverse | Same as column, but in reverse order. |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different flex-direction
values.
<style>
.flex-direction-example {
background-color: #776fac;
padding: 5px;
display: flex;
flex-direction: column-reverse;
}
.flex-direction-example > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-direction-example">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
With little CSS you can create alternating flex directions for each row.
The odd numbered rows have a row-reverse
flex direction.
<style>
.flex-container-alternate {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-container-alternate > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
.flex-container-alternate:nth-child(odd) {
flex-direction: row-reverse;
}
</style>
<div class="flex-container-alternate">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="flex-container-alternate">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="flex-container-alternate">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
This table shows when flex-direction
support started for each browser.
Chrome
|
29.0 | Aug 2013 |
Firefox
|
28.0 | Mar 2014 |
IE/Edge
|
11.0 | Oct 2013 |
Opera
|
17.0 | Aug 2013 |
Safari
|
9.0 | Sep 2015 |