<h2>flex-wrap: nowrap(default)</h2>
<div class="a z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>flex-wrap: wrap | wrap-reverse</h2>
<div class="b z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="c z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.z{display:inline-flex;width:100px;height:100px;border:5px solid black;color:white;vertical-align:top;}
.z>*{flex:0 0 50px;}
.z>:nth-child(1){background:red;}
.z>:nth-child(2){background:green;}
.z>:nth-child(3){background:blue;}
.a{flex-wrap:nowrap;}
.b{flex-wrap:wrap;}
.c{flex-wrap:wrap-reverse;}