2-6 垂直對齊

一、垂直對齊：Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。(row)

1. align-items-start(預設)：置頂
2. align-items-center：置中
3. align-items-end：置底
4. 程式碼：https://codepen.io/ugm/pen/LdXeyW

   <div class="container">
     <div class="row align-items-start my-3">
       <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 align-items-center mb-3">
       <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 align-items-end mb-3">
       <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>

    

5. css

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

    

二、單獨針對 Column 做對齊的動作(col)

1. align-self-start：置頂
2. align-self-center：置中
3. align-self-end：置底
4. 程式碼：

   
     <h4>單獨</h4>  
     <div class="row my-3">
       <div class="col-2 align-self-start"><div class="cell">A</div></div>
       <div class="col-2 align-self-center"><div class="cell">B</div></div>
       <div class="col-2 align-self-end"><div class="cell">C</div></div>
     </div>