HTML Code：
<ul id="box"> <li>a</li> <li>b</li> <li>c</li> </ul>
CSS Code：
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;} #box li:nth-child(1){box-flex:1;} #box li:nth-child(2){box-flex:1;} #box li:nth-child(3){box-flex:2;}
上面代碼請自行加上-moz-,-webkit-之類的。box-flex生效需定義其父元素display為box或inline-box
CSS Code：
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;} .box li{width:50px;padding:7px;} #box li:nth-child(1){box-flex:1;} #box li:nth-child(2){box-flex:1;} #box li:nth-child(3){box-flex:2;}
從上面的代碼，我們可以知道a,b,c的寬度分別為50+7*2=64px，三者加起來即192px，所以剩下的240-192=48px才是父元素的剩余空間，于是a,b,c按照設(shè)定的1:1:2來分配這48px，a分得12px，b分得12px，c分得24px，所以最終a=64+12=76px，b=64+12=76px，c=64+24=88px
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-11.0 | 2.0-40.0-moz- | 4.0-45.0-webkit- | 6.0-8.0-webkit- | 15.0-29.0-webkit- | 6.0-8.3-webkit- | 2.1-4.4.4-webkit- | 18.0-42.0-webkit- |