<div class="flex-container" id="multi-ligne-no-wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">flex items with <strong style={{color: "brown"}}>no-wrap</strong></div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>
<div class="flex-container" id="multi-ligne-wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">flex items with <strong style={{color: "brown"}}>wrap</strong></div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

<div class="flex-container" id="multi-ligne-wrap-reverse">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">flex items with <strong style={{color: "brown"}}>wrap-reverse</strong></div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

/* global style */
.flex-container {
  display: flex;
  /*  try to play with width to undertand more about flex-wrap  */
  width: 350px;
  margin: 10px;
  background-color: rgba(211, 211, 211, 0.2);
  border: 1px dashed grey;
}

.flex-item {
  background-color: lightskyblue;
  margin: 5px;
  padding: 8px 14px;
  text-align: center;
}
/* ...................................
......................................
......................................*/

/* flex-wrap values */
#multi-ligne-no-wrap {
  flex-wrap: no-wrap; /*default*/
}

#multi-ligne-wrap {
  flex-wrap: wrap;
}

#multi-ligne-wrap-reverse {
  flex-wrap: wrap-reverse;
}