The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container.
.element {
flex-direction: column-reverse;
}Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property.
The flex-direction property accepts four possible values:
row: same as text direction (default)row-reverse: opposite to text directioncolumn: same asrowbut top to bottomcolumn-reverse: same asrow-reversetop to bottom
Note that row and row-reverse are affected by the directionality of the flex container. If its text direction is ltr, row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it’s the opposite.
Syntax
flex-direction: row | row-reverse | column | column-reverseDemo
In the following demo:
- Red list is set to
row - Yellow list is set to
row-reverse - Blue list is set to
column - Green list is set to
column-reverse
Note: The text direction hasn’t been edited.
So basically, you will use row in most cases, or column under certain circumstancies. Otherwise, it is pretty uncommon to reverse direction order.
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | All | 20-48 2 49+ 3 | 21-28 4 29+ | 7-8 4 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 4 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Supported with prefix
-ms - 2 Partial support
- 3 Supported with prefix
-moz- - 4 Supported with prefix
-webkit-
For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.
More information
- flex-direction in the spec
- flex-direction at MDN
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Related posts
Balancing on a Pivot with Flexbox
Boxes That Fill Height (Or More) (and Don’t Squish)
Centering in CSS: A Complete Guide
Designing A Product Page Layout with Flexbox
Equal Columns With Flexbox: It’s More Complicated Than You Might Think
grid-auto-flow : CSS Grid :: flex-direction : Flexbox
How to Make a Media Query-less responsive Card Component
The Thought Process Behind a Flexbox Layout
Related
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
flex
.element { flex: 1 1 100px; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-content
.element { justify-content: center; }
justify-items
.element { justify-items: center; }
order
place-content
place-items
.element { place-items: center; }
Hi, I recently got stuck with the flexible box model, because I couldn’t figure out how to get
flex-direction: columnto work on pre-6.1 safari.-webkit-flex-direction: columnis not supported, and neither is the shorthand-webkit-flex-flow: column wrap.I discovered here that in order to achieve the
columndirection with the oldbox-*syntax in webkit browsers we have to use:-webkit-box-orient: vertical.I had a hard time finding this info, so I thought I’d leave a comment to help anyone out who is trying to achieve true cross-browser flex support. Anyone else encounter this?
Thanks Colin! You saved me a lot of time.
Really really thank you Colin :D
I came to this article with the same this exact problem and found the solution in your comment. Thanks!
You’re awesome Colin, this solved the exact problem that I was having.
Wow Colin, life saver! SO much love!
Thanks, Colin! I was trying to figure out what Safari had a problem with all day when I found your comment.
Hi
Maybe i´m late discovering this, Colin´s findings were just the right medicine for oldtimer Safari (3 and i belive up to 5.1.7 or so).
Thanks a lot
Colin I think I love you!!!! You saved me :)))))
Dammit, thanks Colin! Fixed it for me in Chrome, too.
Sorry, nope, did not work in Chrome after all..
This really helped. Thanks a bunch! As web developers, we really need to start using flex more often.
Sources on CodePan is here
I’m trying to use flex box to fix footer at the bottom of viewport when page is smaller when a viewport. And with Colin’s advise nothing doesn’t work too. I was set body styles to
body {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
display: flex;
flex-direction: column;
min-height: 100vh;
}
and main container to
.cont {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Safari was amaze me.
Anyone know how to fix this?
I usually don’t post in programming related blogs (only on StackOverflow) but Colin deservers my time: Thank you mate!
Thanks Colin, your solution partly worked. I also drew from these two posts:
http://elikirkriser.com/flexbox-css-cross-browser-issues/
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
Ayyy Colin came clutch
I just wanted to say, Thank – You! You got me out of a rut. I tried fixing columns on a template that was using flexbox and instead, I used Bootstrap commands. Took me a few hours to figure it out. Thanks for the quick tip! <3
Hi Guys, even I ran into the same problem. After trying so many things, I encountered one solution which worked for me.
If you are using ‘flex-basis’ property, it will hamper the ‘flex-direction’.
If you can avoid using ‘flex-basis’, it will work.
goodness! i can’t believe it’s already 2018 and i got this issue with an updated version of google chrome. Thanks so much Collin. this has saved my day!