CSS3弹性盒模型之box-flex

时间:2023-11-10 20:26:50

对于之前讲过的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绝对是你想要的!!