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.

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 4 different values:

  • row (default): same as text direction
  • row-reverse: opposite to text direction
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse top 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.


flex-direction: row | row-reverse | column | column-reverse

.flex-container {
  flex-direction: row;


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.

Check out this Pen!

So basically, you will use row in most cases, or column under certain circumstancies. Otherwise, it is pretty uncommon to reverse direction order.

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).


  1. User Avatar
    Permalink to comment#

    Hi, I recently got stuck with the flexible box model, because I couldn’t figure out how to get flex-direction: column to work on pre-6.1 safari. -webkit-flex-direction: column is not supported, and neither is the shorthand -webkit-flex-flow: column wrap.

    I discovered here that in order to achieve the column direction with the old box-* 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?

  2. User Avatar
    Permalink to comment#

    Thanks, Colin! I was trying to figure out what Safari had a problem with all day when I found your comment.

  3. User Avatar
    Permalink to comment#


    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

  4. User Avatar
    Permalink to comment#

    Colin I think I love you!!!! You saved me :)))))

  5. User Avatar
    Permalink to comment#

    Dammit, thanks Colin! Fixed it for me in Chrome, too.

  6. User Avatar
    Mango Web Design
    Permalink to comment#

    This really helped. Thanks a bunch! As web developers, we really need to start using flex more often.

  7. User Avatar
    Web Dev Fan
    Permalink to comment#

    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?

  8. User Avatar
    Permalink to comment#

    I usually don’t post in programming related blogs (only on StackOverflow) but Colin deservers my time: Thank you mate!

  9. User Avatar
    Permalink to comment#
  10. User Avatar
    Permalink to comment#

    Ayyy Colin came clutch

  11. User Avatar
    Kanesha Patterson
    Permalink to comment#

    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

  12. User Avatar
    Rishi Kumar
    Permalink to comment#

    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.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.