CSS Property flex-direction

The flex-direction property is a property of the Flexible Box Layout.

The flex-direction property sets the direction of the flexible items.

Summary

Initial value: row
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.flexDirection="column-reverse"
Animatable: no

CSS Syntax

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

Property Values

row: Default value. display flexible items horizontally as a row
row-reverse: As row in reverse order
column: display flexible items vertically as a column
column-reverse: As column in reverse order

Browser compatibility


`flex-direction`	Yes	11.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--from w ww .ja va 2 s  . c  om-->
    width: 400px;
    height: 400px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;">A</div>
  <div style="background-color:blue;">B</div>
  <div style="background-color:tomato;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:grey;">E</div>
  <div style="background-color:green;">F</div>
</div>

</body>
</html>

Click to view the demo

Example 2

The following code shows the usage of different directions.

<!DOCTYPE html>
<html>
<style>
.flex-container {<!--  ww w.j av a2  s .  com-->
  padding: 10;
  margin: 10;
  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: green;
}

.flex-item {
  background: red;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}</style></head><body>
<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>
</body></html>

Click to view the demo