flex-direction

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.

Syntax

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

.flex-container {
  flex-direction: row;
}

Demo

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.

<ul class="flex-container row">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container row-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container column">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container column-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.row            { 
  -webkit-flex-direction: row; 
  flex-direction: row;
}

.row-reverse    { 
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse;
}  
.row-reverse li {
  background: gold;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}
.column li {
  background: deepskyblue;
}

.column-reverse { 
  -webkit-flex-direction: column-reverse; 
  flex-direction: column-reverse; 
  float: right;
}
.column-reverse li {
  background: lightgreen;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

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

Related Properties

• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
• order

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;)

Blackberry browser 10+ supports the new syntax.