Bootstrap4 開始用flex來排版，這次也用上一個春聯案例來試試看排版。

以下有幾個使用flex重點：

1.移動方向：

a.左右(x軸)--row

justify-content：從 start（瀏覽器預設）、 end、center、between、或 around中選擇。

b.上下(y軸)--col

align-items：從start、 end、 center、 baseline、 或 stretch (瀏覽器預設) 中選擇。

c.自身移動--

align-self：start、 end、 center、 baseline、 或 stretch (瀏覽器預設)。

2.啟用flex

a.無網格--

http://bootstrap.hexschool.com/docs/4.0/utilities/flex/

d-flex和d-inline-flex：
使用 display 通用類別來創建一個 flexbox 容器，並將 直屬內元素 轉換為 flex 屬性。

flex-row和flex-row-reverse：
透過通用類別來設定 flex 容器與內層 flex 的方向。

<div class="d-flex flex-row justify-content-around block">
  <div class="box text-center font-weight-bold">天增歲月人增肥</div>
  <div class="box text-center font-weight-bold">福滿乾坤豬滿堂</div>
</div>//text-center 紅字,font-weight-bold 粗體字

codepen：https://codepen.io/yuski/pen/NXjwvx

b.網格系統 row和col--

http://bootstrap.hexschool.com/docs/4.0/layout/grid/
本身具有flex屬性不用另外加上d-flex啟用

<div class="container">//container 無滿版靠中對齊
  <div class="row justify-content-around block">
    <div class="col-1">//12分之一欄位
       <div class="box text-center font-weight-bold">
       天增歲月人增肥
       </div>
    </div>
  <div class="col-1">
       <div class="box text-center font-weight-bold">
       福滿乾坤豬滿堂
       </div>
    </div>
  </div>
</div>

codepen：https://codepen.io/yuski/pen/rpmorR

以上只是差在有沒有網格系統，可以視情況而使用!

如果有用「網格系統」

「他父層級一定是row(行)，子層級一定是column(欄)，最外層則用container包起來」

codepen：

網格：

https://codepen.io/yuski/pen/rpmorR

無網格：

https://codepen.io/yuski/pen/NXjwvx