The contents of a flex container can be laid out in any direction and in any order using flex-direction. It is flex container property.
Syntax:
.someflexcontainer {
display: flex;
flex-direction: row;
}CSS property flex-direction
| CSS version: | CSS 3 |
| Value: | row | row-reverse | column | column-reverse |
| Initial: | row |
| Applies to: | flex containers |
| Inherited: | no |
flex-direction values
| row | left to right (for direction ltr). right to left (for direction rtl). |
| row-reverse | right to left (for direction ltr). left to right (for direction rtl). |
| column | top to bottom |
| column-reverse | bottom to top |
Example – flex-direction
In the following code, CSS property flex-direction can be changed to the following values
- row
- row-reverse
- column
- column-reverse
<style>
.fbox {
display: flex;
flex-direction: row;
width: 200px; background-color:gray;
}
.child {
background-color:green;
padding: 3px; margin: 3px;
}
</style>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
</div>flex-direction refresh
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Flexible Box Layout Module | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 29+ | Yes 28+ | Partial 11+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 11+ | Yes 12.1+ |
source: caniuse.com
