flex-direction Archives

<!DOCTYPE html> <html> <head> <style> #box-container { width: 200px; height: 200px; border: 3px solid #333; display: flex; flex-flow: row-reverse wrap; } #box-container div { width: 50px; height: 50px; } </style> </head> <body> <div id="box-container"> <div style="background-color:#264653;color: white;">1</div> <div style="background-color:#2a9d8f;">2</div> <div style="background-color:#e9c46a;">3</div> <div style="background-color:#e76f51;">4</div> <div style="background-color:#f4a261;">5</div> <div style="background-color:#264653;color: white;">6</div> </div> </body> </html>

The CSS flex-direction property defines the direction of the flexible items.

Demo:

Syntax:

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

row (default) – the flexible items are displayed horizontally, as a row.

row-reverse – same as row, but in reverse order.

column – the flexible items are displayed vertically, as a column.

column-reverse – same as column, but in reverse order.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-direction: row-reverse; 
}

.a, .b, .c, .d, .e, .f {
  width: 50px;
  height: 50px;
}

.a {
  background-color:#264653;
  color: white;
}

.b {
  background-color:#2a9d8f;
}

.c {
  background-color:#e9c46a;
}
.d {
  background-color:#f4a261;
}

.e {
  background-color:#e76f51;
}

.f {
  background-color:#264653;
  color: white;
}

</style>
</head>
<body>

<div id="box-content">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>
    
</body>
</html>

Output:

Note: Internet Explorer 10 and earlier versions do not support the flex-direction property!

Enjoy coding!