Flex 概念
依據 W3C 描述，flex 概念如下圖所示，與 block 或 inline-block 不同，flexbox 依據方向和尺寸來佈局。
Flex 屬性
對於初學者來說容易搞混，但先將屬性以內外元件區分，可便於記憶與學習。
Flex 外容器 (container) 屬性：
- display
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
Flex 內元件 (items) 屬性：
- flex
- flex-grow
- flex-shrink
- flex-basis
- order
- align-self
display
display: flex | inline-flex;inline-flex 類似 inline-block + flex，後方元素不換行。
flex-direction
決定元素排列的方向。
flex-direction: row | row-reverse | column | column-reverse;- row：水平排列
- column：垂直排列
See the Pen [flex] flex-direction by Winter (@yichinweng) on CodePen.
flex-wrap
決定元素超出範圍時是否要換行。
flex-wrap: nowrap | wrap | wrap-reverse;See the Pen [flex] flex-wrap by Winter (@yichinweng) on CodePen.
flex-flow
flex-flow: flex-direction flex-wrap;justify-content
主軸的排列方式。
justify-content: flex-start | flex-end | center | space-between | space-around;align-items
交錯軸的對齊方式。
align-items: flex-start | flex-end | center | baseline | stretch;See the Pen [flex] justify-content by Winter (@yichinweng) on CodePen.
align-content
align-items 的多行版本。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;flex
flex 包含以下三種屬性，若只寫一個數值，則代表 flex-grow。
- flex-grow：外容器空間有剩餘時，以多少權重分配剩餘空間。預設值為 0。
- flex-shrink：空間不夠時，以多少權重收縮元件的空間。預設值為 1。
- flex-basis：元件基準值。
※延伸閱讀：詳解 flex-grow 與 flex-shrink
See the Pen [flex] flex by Winter (@yichinweng) on CodePen.
align-self
調整個別元件的交錯軸設定，此設定會覆蓋 align-items 的設定。
align-self: stretch | center | flex-start | flex-end | baseline;Order
可以定義元件的順序，依據數字大小依序排列。