11. 彈性排版

一、彈性排版 (由於瀏覽器支援度不足及使用上不普遍，本節內容請自行參考)

1. display: flex (彈性方框)
2. flex-direction: row | column | row-reverse | column-reverse (排列方向)
3. order: number (排列順序)
4. flex-grow: number (區塊填充比例)
   可將空白的寬度平均分配到各區塊
5. flex-shrink: number (區塊縮減比例)
   可將超出的寬度平均縮減到各區塊
6. flex-basis: length (計簡單位長度)
   將忽略本身的width，而以flex-basis來當作本身的width來計算分配的寬度
7. flex: flex-grow flex-shrink flex-basis (彈性效果簡寫)
8. justify-content: flex-start | flex-end | center | space-between | space-around (水平內容對齊方式)
9. align-items: stretch | center | flex-start | flex-end | baseline (垂直內容對齊)
10. align-self: stretch | center | flex-start | flex-end | baseline (自我對齊方式)
11. flex-wrap: nowrap | wrap | wrap-reverse (斷行方式)
12. align-content: flex-start | flex-end | center | space-between | space-around | stretch (多行時內容對齊方式)
13. flex-flow: flex-direction flex-wrap (排列方向&斷行簡寫)