彈性盒子模型
阿新 • • 發佈：2018-12-18
容器
| 屬性 | 值 |
|---|---|
| flex-direction（專案的排列方向） | row / row-reverse / column / column-reverse |
| flex-wrap（換行） | nowrap / wrap / wrap-reverse; |
| justify-content（對齊方式） | flex-start / flex-end / center / space-between / space-around |
| align-items（非主軸如何對齊） | flex-start / flex-end / center / baseline / stretch |
| align-content（多軸線對齊） | flex-start / lex-end / center / space-between / space-around / stretch |
專案
| 屬性 | 值 |
|---|---|
| order | （排列順序 數值越小 排列越靠前 預設為0） |
| flex-grow | （放大比例 預設為0） |
| flex-shrink | （縮小比例 預設為0） |
| flex-basis | （在分配多餘空間之前，專案佔據的主軸空間 預設為auto） |
| align-self | （允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性 預設為auto） |
推薦一個大神的部落格：阮一峰：flex佈局教程