flex不管在排版上還是對齊上都可以快速方便地實踐，而且bootstrap像是格線系統或是很多元件都有使用到flex，這一篇我們就來學bootstrap 的Flex Box，讓朋朋們可以輕鬆掌握排版術。
還沒有學過flex或是想要複習的可以看這篇圖解：CSS Flex 屬性一點也不難

一、起手式: 添加.d-flex

在你想要成為flex box的容器中添加.d-flex或是.d-inline-flex，此容器就具有flex屬性，其下層的物件也會變成flex-item，之後你就可以對他們做flex上的更多設定，當然，起手勢也是display類別所以也有響應式的選項，以下列出來:

(p.S.使用.d-flex與.d-inline-flex的差別在於，.d-flex的容器不設寬度時會自動width:100%，而使用.d-inline-flex的容器不設寬度時的寬度是子元素寬度之和。)

二、flex的方向

我們使用.flex-row來使此容器內物件水平排列，要水平方向反轉的話使用.flex-row-reverse；
使用.flex-column使容器內物件做垂直排列，要垂直方向反轉的話使用.flex-column-reverse。

當然它們也有響應式，寫法是:.flex-斷點-方向 EX: .flex-md-row-reverse就是在瀏覽器寬度md以上呈現.flex-row-reverse。
規則也是斷點以上擁有該效果，其他在此不做贅述想，知道細節可以參考官網。

三、justify-content屬性

justify-content屬性可以讓我們控制此容器底下物件的主軸排版方式(.flex-row和.flex-row-reverse的主軸是水平方向；.flex-column和.flex-column-reverse的主軸是垂直方向
寫法是: justify-content-start|center|around|between|evenly
以下是例子:

<div class="d-flex justify-content-start">靠主軸起始方向對齊</div>
<div class="d-flex justify-content-end">靠主軸末端方向對齊</div>
<div class="d-flex justify-content-center">靠主軸置中對齊</div>
<div class="d-flex justify-content-between">子物件之間留有空間</div>
<div class="d-flex justify-content-around">子物間周圍留有空間</div>
<div class="d-flex justify-content-evenly">子物件周圍留有空間，且間距相同</div>

CodePen範例
此外它也支持響應式，寫法是.justify-content-斷點-start|center|around|between|evenly，
例如: .justify-content-sm-start就是在瀏覽器sm以上呈現`.justify-content-start
其他規則也是斷點以上擁有該效果，在此不做贅述，想知道細節可以參考官網。

四、align-items屬性

align-items屬性可以讓我們控制此容器底下物件的交錯軸排版方式(.flex-row和.flex-row-reverse的交錯軸是垂直方向；.flex-column和.flex-column-reverse的交錯軸是水平方向
寫法是: align-items-start|center|end|baseline|stretch
以下是例子:

<div class="d-flex align-items-start">靠交錯軸起始方向對齊</div>
<div class="d-flex align-items-end">靠交錯軸末端方向對齊</div>
<div class="d-flex align-items-center">靠交錯軸置中對齊</div>
<div class="d-flex align-items-baseline">元素的基線將對齊容器中的交錯軸方向基線，通常用於高度不一的文本</div>
<div class="d-flex align-items-stretch">元素將被拉伸以填滿容器的高度，不論其內容的高度如何。(預設值)</div>

可參考此範例CodePen
補充:baseline知識
此外它也支持響應式，寫法是.align-items-斷點-start|center|end|baseline|stretch，
例如: .align-items-lg-end就是在瀏覽器lg以上呈現.align-items-end
其他規則也是斷點以上擁有該效果，在此不做贅述，想知道細節可以參考官網。

五、Align-self屬性

align-self屬性可以讓我們個別設定flex容器類的子物件交錯軸排版，此類別寫在子物件上。
寫法如此:.align-self-start|center|end|baseline|stretch
以下是例子:

<div class="align-self-start">我自己靠交錯軸起始方向對齊</div>
<div class="align-self-end">我自己靠交錯軸末端方向對齊</div>
<div class="align-self-center">我自己靠交錯軸中間對齊</div>
<div class="align-self-baseline">我自己靠容器中的交錯軸方向基線對齊</div>
<div class="align-self-stretch">我自己被拉伸以填滿容器的高度</div>

可參考此CodePen玩玩看

它也支持響應式，寫法是.align-self-斷點-start|center|end|baseline|stretch，
例如: .align-self-lg-end就是在瀏覽器lg以上呈現.align-self-end
其他規則也是斷點以上擁有該效果，在此不做贅述，想知道細節可以參考[官網

下一篇我會繼續講更多bootstrap flex屬性，敬請期待。