彈性盒模型

新版：

　　父元素：dispaly:flex

　　主軸方向設置：flex-direction:row(水平方向，默認)  flex-direction:column(垂直方向)

　　主軸上元素方向排列設置：flex-direction:row-reverse (水平居右，從右往左排)   flex-direction:column-reverse(垂直居下, 從下往上排)

　　主軸上元素開始位置：justify-content:flex-start(元素在主軸開始位置，餘下空間在結束位置)

　　　　　　　　　　　　justity-content:flex-end(元素在主軸結束位置，餘下空間在開始位置)　

 　　　　　　　　　　　  justity-content:center(元素在主軸中間位置，餘下空間在兩側位置)

　　　　　　　　　　　　justity-content:space-bwtten(元素平均分配主軸空間，餘下空間在元素之間位置)

　　　　　　　　　　　　justity-content:space-around(元素平均分配主軸空間，餘下空間在元素兩側位置)

 

　　縱軸上元素開始位置：align-item:flex-start(元素在縱軸開始位置，餘下空間在結束位置)

　　　　　　　　　　　　align-item:flex-end(元素在縱軸結束位置，餘下空間在開始位置)　

 　　　　　　　　　　　  align-item:center(元素在縱軸中間位置，餘下空間在兩側位置)

　　　　　　　　　　　　align-item:baseline(元素平均分配縱軸空間，餘下空間在元素之間位置)

　　　　　　　　　　　　align-item:stretch(元素平均分配縱軸空間，餘下空間在元素兩側位置)

 

 

 　　加在子級元素上：

　　根據父級寬度平均分配子級寬度：flex-grow:1;

　　子級元素排列順序：order:1(數值越小越靠前，能夠接受任意值)

　　　　　　　　　　　

 

 

舊版：

　　瀏覽器前綴以 webkit爲例

　　父元素：dispaly:webkit-box

　　主軸方向設置：webkit-box-orient:horizontal;(水平方向，默認)  webkit-box-orient:vertical(垂直方向)

　　主軸上元素方向排列設置：webkit-box-orient:reverse (水平居左，從右往左排)   flex-box-orient:reverse(垂直居頂, 從下往上排)

　　主軸上元素開始位置：webkit-box-pack:start(元素在主軸開始位置，餘下空間在結束位置)

　　　　　　　　　　　　webkit-box-pack:end(元素在主軸結束位置，餘下空間在開始位置)　

 　　　　　　　　　　　  webkit-box-pack:center(元素在主軸中間位置，餘下空間在兩側位置)

　　　　　　　　　　　　webkit-box-pack:justify(元素平均分配主軸空間，餘下空間在元素之間位置)

　　縱軸上元素開始位置：webkit-box-align:flex-start(元素在縱軸開始位置，餘下空間在結束位置)

　　　　　　　　　　　　webkit-box-align:flex-end(元素在縱軸結束位置，餘下空間在開始位置)　

 　　　　　　　　　　　  webkit-box-align:center(元素在縱軸中間位置，餘下空間在兩側位置)

 

　　加在子級元素上：

　　根據父級寬度平均分配子級寬度：-webkit-box-flex:1;

　　子級元素排列順序：-webkit-box-ordinal-group:1(數值越小越靠前，最小值1)