育將電腦工作室 - 線上書籍

數位相簿很上手
=======

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

1. <span style="font-size:18px;">align-items-start(預設)：置頂</span>
2. <span style="font-size:18px;">align-items-center：置中</span>
3. <span style="font-size:18px;">align-items-end：置底</span>
4. <span style="font-size:18px;">程式碼：</span>[<span style="font-size:18px;">https://codepen.io/ugm/pen/LdXeyW</span>](https://codepen.io/ugm/pen/LdXeyW) ```
  <pre class="brush:as3;">
  <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>
  ```
 
### 二、單獨針對 Column 做對齊的動作(col)

1. <span style="font-size:18px;">align-self-start：置頂</span>
2. <span style="font-size:18px;">align-self-center：置中</span>
3. <span style="font-size:18px;">align-self-end：置底</span>
4. <span style="font-size:18px;">程式碼：</span> ```
  <pre class="brush:as3;">
  
  <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>
  ```
  
   <span style="font-size:18px;"></span>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown