<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. 
Les lignes flexibles s'empilent dans la direction de l'axe croisé (qui est du haut en bas dans le mode d'écriture_du gauche vers la droite) */</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; /* Le même que le précedent, sauf que les éléments flexibles s'emballent dans la direction opposée de l'axe croisé*/</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; /* 
L'axe principal est pivoté. Dans un langage gauche à droite et un mode d'écriture horizontale comme celui-ci, l'axe principal devient vertical. Les éléments ne s'emballent pas et tentent de s'insérer dans une seule ligne */</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. Les lignes supplémentaires auxquelles les éléments s'ajoutent sont ajoutées horizontalement au lieu d'être empilées verticalement, car après avoir spécifié "colonne" pour l'axe principal, l'axe croisé devient horizontal et les lignes empilées suivent l'axe croisé */</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; /* Le même que précédemment, sauf que les éléments flexibles s'emballent dans la direction opposée de l'axe croisé */</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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.