有一天，我突然看到display:box box-flex这个属性。瞬间凌乱了，这有是个什么新用法呀，在好奇心的驱使下，查资料，好好补给了一下
原来这是CSS3新出的弹性盒模型，就是为了更加容易的控制盒子与盒子之间空间关系的一种机制。既然是一种很新的机制，那么，使用的时候，肯定得判断其兼容性了
JavaScript判断
window.CSS.supports("display","-webkit-box") //webkit内核
window.CSS.supports("display","-moz-box") //火狐浏览器CSS判断
@supports(display:-moz-box){
//写上你想要使用的CSS
}
@supports(display:-webkit-box){
}
@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) {
}看到没，还需要加前缀。就好像CSS3刚出来时，使用 border-radius 也需要加前缀一样，现在的话，就可以随意使用，相信以后这个属性也会支持的很好吧。什么，你问我IE怎么判断兼容。额，这个问题嘛，其实我也不是很清楚，等IE15出来了，应该会支持的很棒吧。呵呵呵
下面来了解了解几个属性。以下属性，在使用的时候记得加上前缀
//要设置在父盒子上 display: box（开启弹性盒模型） box-orient: horizontal（水平）vertical（垂直） box-direction: normal（正常）reverse（反转) //要设置在子盒子上 box-ordinal-group: 数字，用来控制显示顺序 box-flex: 盒子所占比例
<div style="display: -moz-box; display: -webkit-box; -moz-box-orient: horizontal;-webkit-box-orient: horizontal; -moz-box-direction: normal; -webkit-box-direction: normal;width: 500px; height: 100px;"> <div style="-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 2;-webkit-box-flex: 2; background: #666;"> 1 </div> <div style="-moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -moz-box-flex: 1;-webkit-box-flex: 1; background: #999;"> 2 </div> <div style="-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 2;-webkit-box-flex: 2; background: #ccc;"> 3 </div> </div>
3个div设置group分别为1、2、1。结果他们的顺序就成了1、3、2，可见group值越小，越靠前。值相同，则按正常顺序
3个div设置flex分别为2、1、2。结果1占2/5为200px，2占1/5为100px，3占2/5为200px，3个div正好填充满父节点的500px
现在父节点设置 box-orient 为水平，box-direction 为正常，下面看看别的情况
<div style="display: -moz-box; display: -webkit-box; -moz-box-orient: vertical;-webkit-box-orient: vertical; -moz-box-direction: reverse; -webkit-box-direction: reverse;width: 500px; height: 100px;"> <div style="-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; height:100px; background: #666;"> 1 </div> <div style="-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 1;-webkit-box-flex: 1; background: #999;"> 2 </div> <div style="-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -moz-box-flex: 1;-webkit-box-flex: 1; background: #ccc;"> 3 </div> </div>
看到效果了么，垂直了，也反转了。这里还有个玄机，我把div1高度设置成100px，那么，div2和div3会共享剩下的100px，共享方式还是取决于flex所占的比例。
这两个属性也要用在父盒子上，但是浏览器支持情况很不理想，就先不演示了，看不到正确的效果，反倒不如不说。相信以后会支持的很好的，期待吧
box-pack 水平方向上的空间分布 start 所有盒子在父盒子的左侧 end 所有盒子在父盒子的右侧 justify 盒子在空间内均匀分布 center 所有盒子在父盒子的中间 box-align 垂直方向上的空间分布 start 所有盒子在父盒子的顶部 end 所有盒子在父盒子的底部 center 所有盒子在父盒子的中间 baseline 所有盒子沿着它们的基线排列 stretch 每个盒子的高度调整到适合父盒子的高度
其实我也只是了解了一下这个属性，感觉这个属性配合@media使用，效果会非常棒。想了解的朋友，一定要多练习练习哟