CSS flex-direction Property

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.

Example

#

A flex container with flex-direction set to column.
The items are packed in a column-first fashion.

1
2
3
<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>

Syntax

flex-direction: row | row-reverse | column | 
                column-reverse | initial |inherit;

Values

#

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.

More Examples

Click the buttons to see the different flex-direction values.

1
2
3
<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>

Did you know?

Did you know?

Alternating flex-direction

With little CSS you can create alternating flex directions for each row.
The odd numbered rows have a row-reverse flex direction.

1
2
3
1
2
3
1
2
3
<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>

Browser support

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

You may also like

Guides