昨天說了Flexbox基本排列概念，但還有flex容器的基本概念還沒討論，今天繼續來討論Flex Container吧！
Flexbox包含兩個部件組成：
Flex Container是一種父系（parent）容器元素，
某個元素方框設定了 display: flex 或 display: inline-flex ，元素方框就會變為Flex Container，此元素本身跟其內的項目就會直接套用flexbox的設定，它的直接對應子元素會變成 Flex Items。
可以想像Flex Container是一個架子，我可以決定東西放置方向（水平排列的還是垂直），或是東西滿了能不能自動跳下一層（自動換行），以及如何把裡面的東西對齊。
補充：display: flex 和 display: inline-flex的差別跟display: block 與 display: inline-block 類似。
.container {
display: flex;
/* 或 inline-flex */
}
| 屬性 | 說明 |
|---|---|
flex-direction |
主軸方向（row、row-reverse、column、column-reverse） |
flex-wrap |
是否換行（nowrap、wrap、wrap-reverse） |
flex-flow |
flex-direction + flex-wrap 的縮寫 |
justify-content |
沿主軸對齊項目（水平或垂直，依 direction 而定） |
align-items |
沿交叉軸對齊單行項目 |
align-content |
沿交叉軸對齊多行項目（只有多行時有效） |
Flex Item 為 Flex Container 其內部的子元素，但 Flex Container 子元素的子元素就不能使用到Flex Item 屬性。
若是 Flex Container 是架子，那Flex Item 就是放在架子上的盒子，盒子它們可以被壓縮、拉長、自動對齊，甚至可以更改順序或大小。
| 屬性 | 說明 |
|---|---|
order |
控制項目顯示順序（數字越小越先出現） |
flex-grow |
項目在剩餘空間中如何放大（默認 0） |
flex-shrink |
項目在空間不足時如何縮小（默認 1） |
flex-basis |
項目的初始大小（可為 px、%、auto 等） |
flex |
flex-grow + flex-shrink + flex-basis 的縮寫 |
align-self |
覆蓋 align-items，針對單一項目對齊 |
iThome鐵人賽
看影片追技術