垂直對齊
前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。
- align-items-start：置頂
- align-items-center：置中
- align-items-end：置底
▼ 直接在
row裡面寫上align-items-*的 CLASS 即可。
Markup
<div class="row align-items-start">
<div class="col">A<br />A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
<div class="row align-items-center">
<div class="col">A</div>
<div class="col">B<br />B</div>
<div class="col">C</div>
</div>
<div class="row align-items-end">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C<br />C</div>
</div>
另外我們也可以改用
align-self-*在col裡面單獨針對 Column 做對齊的動作- align-self-start：置頂
- align-self-center：置中
- align-self-end：置底
Markup
<div class="row">
<div class="col align-self-start">A</div>
<div class="col align-self-center">B</div>
<div class="col align-self-end">C</div>
</div>
透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！
水平對齊
有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。
- justify-content-start：靠左對齊
- justify-content-center：置中對齊
- justify-content-end：靠右對齊
- justify-content-around：分散對齊(含左右)
- justify-content-between：分散對齊(不含左右)
Markup
<div class="row justify-content-start">
<div class="col-2">A</div>
<div class="col-2">B</div>
<div class="col-2">C</div>
</div>
<div class="row justify-content-center">
<div class="col-2">A</div>
<div class="col-2">B</div>
<div class="col-2">C</div>
</div>
<div class="row justify-content-end">
<div class="col-2">A</div>
<div class="col-2">B</div>
<div class="col-2">C</div>
</div>
<div class="row justify-content-around">
<div class="col-2">A</div>
<div class="col-2">B</div>
<div class="col-2">C</div>
</div>
<div class="row justify-content-between">
<div class="col-2">A</div>
<div class="col-2">B</div>
<div class="col-2">C</div>
</div>移除 gutter
Bootstrap 的
row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。
但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了
no-gutters這個 class，可以讓我們移除 gutter
Markup
<div class="row no-gutters">
<div class="col">A</div>
<div class="col">B</div>
</div>
直接將
no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹Column 排序
以前如果要將排序會用
pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！- flex-unordered：不排序
- flex-first：第一個
- flex-last：最後一個
Markup
<div class="row">
<div class="col flex-unordered">
我應該是第一個，但我不排序
</div>
<div class="col flex-last">
我應該是第二個，但我會排在最後
</div>
<div class="col flex-first">
我應該是第三個，但我會排在最前面
</div>
</div>
這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。
如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的
push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：
Markup
<div class="row">
<div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
<div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>
☞補充：
offset也一樣將前綴往後放，但使用方法相同所以就不特別介紹了。
