11. 彈性排版
一、彈性排版 (由於瀏覽器支援度不足及使用上不普遍,本節內容請自行參考)
- display: flex (彈性方框)
- flex-direction: row | column | row-reverse | column-reverse (排列方向)
- order: number (排列順序)
- flex-grow: number (區塊填充比例)
可將空白的寬度平均分配到各區塊
- flex-shrink: number (區塊縮減比例)
可將超出的寬度平均縮減到各區塊
- flex-basis: length (計簡單位長度)
將忽略本身的width,而以flex-basis來當作本身的width來計算分配的寬度
- flex: flex-grow flex-shrink flex-basis (彈性效果簡寫)
- justify-content: flex-start | flex-end | center | space-between | space-around (水平內容對齊方式)
- align-items: stretch | center | flex-start | flex-end | baseline (垂直內容對齊)
- align-self: stretch | center | flex-start | flex-end | baseline (自我對齊方式)
- flex-wrap: nowrap | wrap | wrap-reverse (斷行方式)
- align-content: flex-start | flex-end | center | space-between | space-around | stretch (多行時內容對齊方式)
- flex-flow: flex-direction flex-wrap (排列方向&斷行簡寫)