2-5 水平對齊

一、水平對齊： Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

使用 flexbox 容器上的 justify-content 通用類別改變 flex 物件在主軸上的對齊（x軸開始，如果 flex-direction: column，則為 y 軸）。從 start（瀏覽器預設）、 end、center、between、或 around 中選擇。

1. justify-content-start：靠左對齊(預設)
2. justify-content-center：置中對齊
3. justify-content-end：靠右對齊
4. justify-content-around：分散對齊(含左右)
5. justify-content-between：分散對齊(不含左右)

二、程式碼

https://codepen.io/ugm/pen/dmQZBp

<div class="container">  
  <div class="row justify-content-start my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-center my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-end my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-around my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-between my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>  
</div>

.row{
  background: #aa0;
  border: 1px blue solid;
}
.cell{
  background: #ccc;
  padding: 10px;
}