2-5 水平對齊

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

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;
}