CSS3弹性盒模型之box-flex

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

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

先看代码：