CSS3：彈性盒模型

是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。

彈性容器內包含了一個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。

彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。

如下元素展現了彈性子元素在一行內顯示，從左到右:

按照一個比例分份，必須有父元素

而且父元素(贊成分)設置爲display:-webkit-box;

子元素設置爲：-webkit-box-flex:2;子元素分的份數>=1；

分份分的是父元素除去固定部分（eg:某個一個設置爲固定的寬度/高度/子元素有margin）剩餘的空間；

一、在使用彈性盒模型的時候父元素必需要加display:box 或 display:inline-box:     新版彈性盒模型：flex：display : flex     老版彈性盒模型：box : display : -webkit-box 二、box-orient 定義盒模型的主軸方向 新版：flex：flex-direction: row / column 老版：box : -webkit-box-orient:         horizontal 水平顯示            vertical 垂直方向  三、box-direction 元素排列順序 新版：flex : flex-direction: row-reverse / column-reverse; 老版：box : -webkit-box-direction:            normal 正序            reverse 反序 四、box-pack 主軸方向富裕的空間管理      新版：flex : justify-content : flex-start / flex-end / center / space-between / space-around;      老版：box : -webkit-box-pack               start 全部子元素在盒子左側顯示，富裕空間在右側               end 全部子元素在盒子右側顯示，富裕空間在左               center 全部子元素居中               justify 富裕空間在子元素之間平均分佈 五、box-align 側軸方向方向富裕的空間管理      新版：flex : align-items : flex-start / flex-end / center / baseline      老版：box : -webkit-box-align               start 全部子元素在據頂               end 全部子元素在據底               center 全部子元素居中 六、Box-flex 定義盒子的彈性空間      新版：flex : flex-grow      老版：box : -webkit-box-flex 七、box-ordinal-group 設置元素的具體位置      新版：flex : order      老版：box : -webkit-box-ordinal-group