标签：
旧式的弹性盒子
1、在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型
2、box-flex 分配空间，假如容器有a份，box-flex:2，那就占a分之2
3、分布方向 水平box-orient: horizontal; 垂直 box-orient:vertical;
4、定义显示顺序：box-ordinal-group
实例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>旧弹性盒模型</title> <style type="text/css"> .content{ width: 1000px; display:-webkit-box; } .content div { height: 50px; line-height: 50px; text-align: center; } #box1 { background: #F69A0B; -webkit-box-flex:1; -webkit-box-ordinal-group:2; } #box2 { background: #FE6403; -webkit-box-flex:2; -webkit-box-ordinal-group:1; } #box3 { background: #02C3F5; -webkit-box-flex:3; -webkit-box-ordinal-group:3; } </style> </head> <body> <div class="content"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> </div> </body> </html>
注意
display:box; 是在属性值加兼容如 display:-webkit-box;
标签：
原文地址：http://www.cnblogs.com/tinyphp/p/4772191.html
