CSS3弹性盒模型之box-flex

对于之前讲过的box-sizing属性，对于页面布局很有用，但是突然发现它依然存在一些问题，前面例子中不会存在问题，不代表它没有问题。如果元素的个数整除100%的时候呢，比较3个元素，那么第一个盒子的宽度就会是33.3333333%,很显然，无论如何都是除不尽的，也就是说不可能平均分配。这显然是不完美的！是否有更完美的解决方案呢，答案是——有，它就是 box-flex.

box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。它使元素实现水平分布，而且不需要使用浮动float属性就能实现水平布局。

先看代码：

.box {

    display:box;display:-webkit-box;display:-moz-box;background-color:#fff;width:500px;height:100px;border:1px solid #333;margin:0 auto;

}

.col_1 {

　　box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;background-color:#ffc;

}

.col_2 {

    background-color:#ccf;box-flex:2;-moz-box-flex:2;-webkit-box-flex:2;

}

.col_3 {

    background-color:#fcf;box-flex:2;-moz-box-flex:2; -webkit-box-flex:2;

}

 

      想要使用box-flex,其父容器必须定义为display:box,而且对于各浏览器必须加上自己私有的前缀，因为目前还没有浏览器支持box-flex属性。容器定子display:box则该容器为内联元素。

      上例中把父容器分成了5份，三个子元素分别为1，2，2，即box-flex的值就是它所占的等份。那么，col_1为500px*(1/5)=100px,col_2和col_3都为500px*(2/5)=200px。那如果其中一个元素设置了固定的宽度值又会如何呢？如：col_3{width:50px},那么设置了固定宽度值的元素就是固定的值，其他子元素就把剩下的部分再按上面的方式来进行分配，当子元素有间隔的时候，他们平分的宽度需要减去它们的margin值，然后再按比较分配。

      不需要计算百分比，设置等分数就能完美展现想要的！！box-flex绝对是你想要的！！