<!-- flex container -->
<div class="flex-container" id="flex">
  <div class="flex-item">these</div>
  <div class="flex-item">are</div>
  <div class="flex-item">flex</div>
  <div class="flex-item">items</div>
  <div class="flex-item">of</div>
  <div class="flex-item">a</div>
  <div class="flex-item">default</div>
  <div class="flex-item">flex</div>
  <div class="flex-item">container</div>
</div>
<!-- inline-flex -->
<div class="flex-container" id="inline-flex">
  <div class="flex-item">these</div>
  <div class="flex-item">are</div>
  <div class="flex-item">flex</div>
  <div class="flex-item">items</div>
  <div class="flex-item">of</div>
  <div class="flex-item">an</div>
  <div class="flex-item">inline</div>
  <div class="flex-item">flex</div>
  <div class="flex-item">container</div>
</div>

/* global style */
.flex-container {
  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;
}
/* ...................................
......................................
......................................*/

/* blok level flex */
#flex {
  display: flex;
}

/* inline level flex */
#inline-flex {
  display: inline-flex;
}