<div class="flex-container" id="justify-content-flex-start">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<div class="flex-container" id="justify-content-flex-end">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<div class="flex-container" id="justify-content-center">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<div class="flex-container" id="justify-content-space-between">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<div class="flex-container" id="justify-content-space-around">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<div class="flex-container" id="justify-content-space-evenly">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

/* global style */
.flex-container {
  display: flex;
  width: 500px;
  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;
}
/* ...................................
......................................
......................................*/

/* try to play with width of a fkex-item undetand more about align-content*/

/* justify-content values */
#justify-content-flex-start {
  justify-content: flex-start;/* default*/
}
#justify-content-flex-end {
  justify-content: flex-end;
}
#justify-content-center {
  justify-content: center;
}
#justify-content-space-between {
  justify-content: space-between;
}
#justify-content-space-around {
  justify-content: space-around;
}
#justify-content-space-evenly {
  justify-content: space-evenly;
}