Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS flex-direction

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides