<p>
  <code>flex-flow: row nowrap; /* the default value */</code>
</p>
<div class="container container-1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<hr>
<p>
  <code>flex-flow: row wrap; /* flex items wrap. flex lines stack in the direction of the cross axis (which is top-to-bottom in a LTR language) */</code>
</p>
<div class="container container-2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<hr>
<p>
  <code>flex-flow: row wrap-reverse; /* same as previous, except flex items wrap in the opposite direction of the cross axis*/</code>
</p>
<div class="container container-3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<hr>
<p>
  <code>flex-flow: column nowrap; /* the main axis is rotated. In a LRT language and horizontal writing mode like this, the main axis becomes vertical. Items do not wrap and try to fit in one line */</code>
</p>
<div class="container container-4">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<hr>
<p>
  <code>flex-flow: column wrap; /* flex items wrap. The additional lines that the items wrap into are added horizontally instead of being stacked vertically, because after specifying "column" for the main axis, the cross axis becomes horizontal, and the stacked lines follow the cross axis */</code>
</p>
<div class="container container-5">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<hr>
<p>
  <code>flex-flow: column wrap-reverse; /* same as previous, except flex items wrap in the opposite direction of the cross axis */</code>
</p>
<div class="container container-6">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
    margin: 50px 0;
}

p {
    font-size: 1.1em;
    font-weight: bold;
}

.container {
    margin: 20px auto;
    width: 100%;
    padding: 20px;
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #594255;
}

.item {
    background-color: #fff;
    width: 100px;
    height: 100px;
    margin: 2px;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 5em;
    color: #594255;
}

.container-1 {
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.container-2 {
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.container-3 {
    -webkit-flex-flow: row wrap-reverse;
    -ms-flex-flow: row wrap-reverse;
    flex-flow: row wrap-reverse;
}

.container-4 {
    height: 800px;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
}

.container-5 {
    height: 800px;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}

.container-6 {
    height: 800px;
    -webkit-flex-flow: column wrap-reverse;
    -ms-flex-flow: column wrap-reverse;
    flex-flow: column wrap-reverse;
}