線上書籍

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

使用 flexbox 容器上的 justify-content 通用類別改變 flex 物件在主軸上的對齊（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

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