<h2>flex-direction: row | row-reverse</h2>
<div class="a z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="b z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>flex-direction: column | column-reverse</h2>
<div class="c z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="d z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.z{display:inline-flex;width:100px;height:100px;background:silver;border:5px solid black;color:white;vertical-align:top;}
.z>*{flex:1 1 0;}
.z>:nth-child(1){background:red;}
.z>:nth-child(2){background:green;}
.z>:nth-child(3){background:blue;}
.a{flex-direction:row;}
.b{flex-direction:row-reverse;}
.c{flex-direction:column;}
.d{flex-direction:column-reverse;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.