标签：
对于之前讲过的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;}标签：
原文地址：http://www.cnblogs.com/garfieldzhong/p/4655809.html
