第二十九章 CSS3弹性伸缩布局【中】
一、混合过滤板（主要针对IE10浏览器伸缩布局效果）
首先，设置伸缩盒的display有如下两个属性值
（1）flexbox 将容器盒模型作为块级弹性伸缩盒显示（混合版本）
（2）inline-flexbox 将容器盒模型作为内联级弹性伸缩盒显示（混合版本）
//需要IE前缀-ms-
div{
display：-ms-flexbox；
}
1、flex-direction 属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式
//设置从上往下排列
div{
-ms-flex-direction:column
}
(1)row 设置从左到右排列
(2)row-reverse 设置从右到左排列
(3)column 设置从上到下排列
(4)column-reverse 设置从下到上排列
2、flex-wrap 属性类似与旧版本中的bow-lines，但是box-lines我们没有讲解，原因是没有浏览器支持他
//设置无法容纳时，自动换行
div{
-ms-flex-wrap：wrap；
}
(1)nowrap 默认值，都在一行或一列显示
* (2)wrap 伸缩项目无法容纳时，自动换行
(3)wrap-reverse 伸缩项目无法容纳时，自动换行，方向和wrap相反
3、flex-flow 属性是集合了排列方向和控制换行的简写形式
//简写形式
div{
-ms-flex-flow：row wrap；
}
4、flex-pack 属性与旧版本中的box-pack一样，设置伸缩项目的对齐方式
//按照中心对齐
div{
-ms-flex-pack：center；
}
(1)start 伸缩项目以起始点靠齐
(2)end 伸缩项目以结束点靠齐
(3)center 伸缩项目以中心点靠齐
(4)justify 伸缩项目平局分布
5、flex-align 属性和旧版本中的box-align一样，处理伸缩项目容器的额外空间
//处理额外空间
div{
-ms-flex-align：center；
}
(1)start 伸缩项目以顶部为基准，清理下部额外空间
(2)end 伸缩项目以底部为基准，清理上部额外空间
(3)center 伸缩项目以中部为基准，平均清理上下部恩爱空间
(4)baseline 伸缩项目以基线为基准，清理额外空间
(5)stretch 伸缩项目填充整个容器，默认
6、flex 属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配
//设置比例分配
p:nth-child(1){
-ms-flex：1；
}
p:nth-child(2){
-ms-flex：3；
}
p:nth-child(3){
-ms-flex：1；
}
7、flex-order 属性和box-ordinal-group 属性一样控制伸缩项目出现的顺序
//设置伸缩项目顺序
p:nth-child(1){
-ms-flex-order：2；
}
p:nth-child(2){
-ms-flex-order：3；
}
p:nth-child(3){
-ms-flex-order：1；
}