justify-content
<br><br>
1. row / center
<div class="flex flex1">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
2. row / flex-start
<div class="flex flex2">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
3. row / flex-end
<div class="flex flex3">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
4. column / center
<div class="flex-2 flex1">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
5. column / flex-start
<div class="flex-2 flex2">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
6. column / flex-end
<div class="flex-2 flex3">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br><br>
align-items
<br><br>
1. row / center
<div class="flex flex4">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
2. row / flex-start 
<div class="flex flex5">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
3. row / flex-end
<div class="flex flex6">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
1. column / center
<div class="flex-2 flex4">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
5. column / flex-start 
<div class="flex-2 flex5">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
6. column / flex-end
<div class="flex-2 flex6">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex{border:1px solid #ccc; width:100%; height: 100px;
display:flex; flex-direction: row;}
.flex-2{border:1px solid #ccc; width:100%; height: 100px;
display:flex; flex-direction: column;}
.box{width: 20px; height: 20px; background:gold; border: 1px solid #000;}
.flex1{justify-content: center; align-content: center; align-items: center; }
.flex2{justify-content: felx-start; align-content: center; align-items: center; }
.flex3{justify-content: flex-end; align-content: center; align-items: center; }
.flex4{justify-content: center; align-content: center; align-items: center; }
.flex5{justify-content: center; align-items: flex-start; align-content: center; }
.flex6{justify-content: center; align-items:flex-end; align-content: center; }