css利用display:box简单快速实现垂直多列布局

css3新添加的属性display:box特性与flex-box特性结合可简单快速的实现多列等比布局，用起来很方便。

这里大致的说一下这两个属性的意义，给父级元素添加display:box样式可使其子元素排列在同一水平上，box-flex：x表示此子元素占据父元素的几份，父元素被分成几份有所有子元素所决定。

不过这个属性目前还没有得到firefox、Opera、chrome浏览器的完全支持，所以在使用的时候还是要加上各大浏览器的前缀：firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。接下来直接上代码：

HTML代码：

<div class="wrap">
<div class="wrap-one">第一块</div>
<div class="wrap-two">第二块</div>
<div class="wrap-three">第三块</div>
</div>

CSS代码：

.wrap{
width:800px;
height:200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}
.wrap-one{
-webkit-box-flex: 3;
-moz-box-flex: 3;
-ms-flex: 3;
-o-box-flex: 3;
box-flex: 3;
background:red;
}
.wrap-two{
-webkit-box-flex: 2;
-moz-box-flex: 2;
-ms-flex: 2;
-o-box-flex: 2;
box-flex: 2;
background:orange;
}
.wrap-three{
-webkit-box-flex: 2;
-moz-box-flex: 2;
-ms-flex: 2;
-o-box-flex: 2;
box-flex: 2;
background:blue;
}

很简单，如需测试直接复制代码运行即可。