文章标题

css3的display: -webkit-box 属性

<div class="wrap">    <div class="num1"></div>    <div class="num2"></div>    <div class="num3"></div></div>

.wrap父容器定义 display:-webkit-box;width:600px;

则.num1定义
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;

---

.num2定义
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;

---

.num3定义
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;

---

则子容器会以父容器的宽度来按所分配的3：2：1的宽度分配。
同时定义了此属性 刚margin:0 auto;不可用。

此属性的使用 有点类似于bootstrap里面的row与col的分布效果。不过此属性的应用更灵活吧 是基于父容器宽度及个人所需要的分布来定义。