CSS3彈性伸縮佈局
●IE瀏覽器不支援●其他瀏覽器需要加字首
display:-webkit-box; //設定彈性伸縮盒模型
1.-webkit-box-orient //主要實現盒子內部元素的流動方向
有四個值：horizontal (伸縮專案從左到右水平排列)預設值
vertical(伸縮專案從上到下垂直排列)
inline-axis(伸縮專案沿著內聯軸排列顯示)
block-axis(伸縮專案沿著塊軸排列顯示)
2.-webkit-box-direction //設定伸縮容器中元素的流動順序
-webkit-box-direction:reverse //逆序 預設值是normal(正常順序)
3.-webkit-box-pack //用於伸縮專案的分佈方式
有四個值：start (伸縮專案以起始點靠齊，相對於整個盒子模型來說)
center(伸縮專案以中心點靠齊)
end(伸縮專案以結束點靠齊)
justify(平局分佈，-webkit-支援，-moz-不支援)
4.-webkit-box-align //用來處理伸縮容器的額外空間
有五個值：start(伸縮專案以頂部為基準，去除下部額外空間)
center(伸縮專案以中部為基準，去除上下部額外空間)
end(伸縮專案以底部為基準，去除上部額外空間)
baseline(伸縮專案以基線為基準，去除額外的空間)和start類似
stretch(伸縮專案填充整個容器，預設)
5.-webkit-box-flex //分配伸縮專案的比例(可用浮點數)
-webkit-box-flex:1
6.-webkit-box-ordinal-group //可以設定伸縮專案的顯示位置(可與其他元素互換位置)
p：nth-child(1){
-webkit-box-ordinal-group:2
}
p：nth-child(2){
-webkit-box-ordinal-group:1
}
◆新版本寫法：相容IE11以上和所有主流瀏覽器新版本 大部分不需要字首
display:flex
1.flex-direction //設定伸縮專案的流動方向
有四個值：row(設定從左到右排列)
row-reverse(設定從右到左排列)
column(設定從上到下排列)
column-reverse(設定從下到上排列)
2.flex-wrap //設定無法容納時，自動換行
有三個值：nowrap(預設 不換行)
wrap（自動換行）
wrap-reverse(自動換行，方向和wrap相反)
3.flex-flow ////direction和wrap的簡寫形式
flex-flow:row wrap
4.justify-content //設定伸縮專案的對齊方式，和舊版本的box-pack一樣
有五個值：flex-start(伸縮專案以起始點靠齊，相對於整個盒子模型來說)
center(伸縮專案以中心點靠齊，相對於整個盒子模型來說)
flex-end(伸縮專案以結束點靠齊，相對於整個盒子模型來說)
space-between(平局分佈)
space-around(同上，但兩端保留一半的空間)
5.align-items //與舊版本box-align一樣，處理伸縮專案容器的額外空間
有五個值：flex-start(伸縮專案以頂部為基準，去除下部額外空間)
flex-end(伸縮專案以底部為基準，去除上部額外空間)
center(伸縮專案以中間為基準，去除上下部額外空間)
baseline(伸縮專案以基線為基準，去除額外的空間)
stretch(伸縮專案填充整個容器，預設)
6.align-self //(單獨設定某個伸縮專案的額外空間，與align-items一樣)
7.flex //用來控制伸縮容器的比例分配 與box-flex類似
8.order //和box-ordinal-group屬性一樣控制伸縮專案出現的順序
◆混合過渡寫法：主要針對IE10瀏覽器實現伸縮佈局
display:-ms-flexbox
1.-ms-flex-direction //設定伸縮專案的流動方向，與舊版本box-orient屬性一樣
有四個值：row(設定從左到右排列)
row-reverse(設定從右到左排列)
column(設定從上到下排列)
column-reverse(設定從下到上排列)
2.-ms-flex-wrap //設定無法容納時，自動換行
有三個值：nowrap(預設 不換行)
wrap（自動換行）
wrap-reverse(自動換行，方向和wrap相反)
3.-ms-flex-flow //direction和wrap的簡寫形式
-ms-flex-flow:row wrap
4.-ms-flex-pack //設定對齊方式
有四個值：start (伸縮專案以起始點靠齊，相對於整個盒子模型來說)
center(伸縮專案以中心點靠齊)
end(伸縮專案以結束點靠齊)
justify(平局分佈，-webkit-支援，-moz-不支援)
5.-ms-flex-align //處理容器的額外空間
有五個值：start(伸縮專案以頂部為基準，去除下部額外空間)
center(伸縮專案以中部為基準，去除上下部額外空間)
end(伸縮專案以底部為基準，去除上部額外空間)
baseline(伸縮專案以基線為基準，去除額外的空間)和start類似
stretch(伸縮專案填充整個容器，預設)
6.-ms-flex //控制伸縮容器的分配比例
7.-ms-flex-order //控制伸縮專案出現的順序 與box-ordinal-group一樣