box-flex 属性

box 属性实例

by weiming le

HTML

<h1>box-flex 属性研究</h1>
<h2>按比例分配所有</h2>
<div id="wrap1" class="box">
  <div class="box1">
    <h1>box1</h1>
  </div>
  <div class="box2">
    <h1>box2</h1>
  </div>
</div>
<h2>按比例分配剩下的部分</h2>
<div id="wrap2" class="box">
  <div class="box1">
    <h1>box1</h1>
  </div>
  <div class="box2">
    <h1>box2</h1>
  </div>
  <div class="box3">
    <h1>box3</h1>
  </div>
</div>

CSS

html,body,h1 { margin:0;padding:0; }
h1 { color:#333; font-size:20px; }
h2 { color:#333; font-size:18px; }
/*注意，此处只做针对chrome的兼容，懒啊，谅解吧*/
.box { display:-webkit-box; width:960px; border:2px solid orange; -webkit-box-orient:horizontal; }
.box>div { height:100px; }
.box>div>h1 { color:#fff; }
#wrap1 .box1 { -webkit-box-flex:2; background:#999; }
#wrap1 .box2 { -webkit-box-flex:1; background:#666; }
/*第二个示例*/
#wrap2 .box1 { width:200px; background:#999; }
#wrap2 .box2 { -webkit-box-flex:1; background:#666; /*宽度应当是(960-200)的三分之一*/}
#wrap2 .box3 { -webkit-box-flex:2; background:#999; }