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

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

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

使用 flexbox 容器上的 `justify-content` 通用類別改變 flex 物件在<span style="color:#FF0000;">主軸</span>上的對齊（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>

```
<pre class="brush:as3;">
<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>
```

```
<pre class="brush:as3;">
.row{
  background: #aa0;
  border: 1px blue solid;
}
.cell{
  background: #ccc;
  padding: 10px;
}
```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown