CSS3 Flexbox，是一種新興的排版方式 (現在講其實已經不新了，最新的是 Grid…)，它優於傳統 float 僅能水平流動的排版，更能做到置中、垂直與等距等等。在學習 bootstrap v4 之前，讓我們先來看一下 Flexbox 的重要觀念。
軸線觀念
- 主軸：
- justify-content
- 可對其主軸的起點、終點或等距排列
- 交錯軸：
- align-items
- 可對其交錯軸的起點、終點或置中
- flex-direction，可改變主軸的方向性 (預設主軸是由左至右)
- 水平
- 垂直
- 反轉
外層屬性
- display：必備屬性
- flex-flow
- flex-direction：決定 flex 軸線
- flex-wrap：決定換行的屬性
- justify-content：主軸的對齊
- align-items：交錯軸的對齊
內層屬性
- flex
- flex-grow：伸展比
- flex-shrink：收縮比
- flex-basis：絕對值
- order：排序
- align-self：單一物件的交錯軸對齊
接著來看一下細部的屬性介紹
flex-direction
對齊方法
- row (default)
- row-reverse
- column
- column-reverse
justify-content
主軸對齊 (外層) ，依據主軸的軸線決定物件之間的間隔方法
以下是 justify-content 所有屬性：
- flex-start
- flex-end
- center
- space-between
- space-around
節錄：MSDN
align-items
交錯軸對齊 (外層)，垂直於主軸的對齊方法
- flex-start
- flex-end
- center
- strech：拉滿整個軸線
- baseline：與文字的行高有關係，以文字基準線來排列
節錄：MSDN
align-self
交錯軸對齊 (內層)，內元件本身垂直於主軸的對齊方法
- flex-start
- flex-end
- center
- strech：拉滿整個軸線
- baseline：與文字的行高有關係，以文字基準線來排列
重點部分介紹就介紹到這，其他一些比較細的例如自動幫你算的設定就遇到再說囉！
參考資料：