flex（Flexible Box）彈性佈局

任何一個容器均可以指定爲 flex 佈局

採用 flex 佈局的元素，稱爲 flex 容器（flex container），簡稱「容器」。它的全部子元素自動成爲容器成員，成爲flex項目（flex item），簡稱「項目」。

經常使用容器屬性：

flex-direction:  row | column | row-reverse | column-reverse

flex-wrap:  nowrap | wrap | wrap-reverse

flex-flow: flex-direction flex-wrap;

flex-shrink: 縮小比例（默認爲1）

flex-glow：方大比例（默認0）

flex-basis: 元素在主軸的初始尺寸百分比（auto由width）

flex: flex-grow + flex-shrink + flex-basis

flex：none（經常使用於固定尺寸，不伸縮）
複製代碼

主軸（橫軸）對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around
複製代碼

交叉軸（縱軸）對齊方式

align-items（單行）: 
stretch(默認 高度撐滿) | flex-start | flex-end | center | space-between | space-around

align-items（只對多行元素有效，會以多行做爲總體進行對齊，容器必須開啓換行）: 
stretch | flex-start | flex-end | center | baseline
複製代碼