box-pack属性测试

by weiming le

HTML

<h1>box-pack:就是决定子元素在剩余的空间里如何布局的</h1>
<h2>box-pack:start</h2>
<div id="wrap1" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>
<h2>box-pack:center</h2>
<div id="wrap2" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>
<h2>box-pack:end</h2>
<div id="wrap3" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>
<h2>box-pack:justify</h2>
<div id="wrap4" class="box">
  <div class="box1">
    <h3>box1</h3>
  </div>
  <div class="box2">
    <h3>box2</h3>
  </div>
  <div class="box3">
    <h3>box3</h3>
  </div>
</div>

CSS

/*只是好看的样子*/
h1 { border:2px solid orange; padding:10px; color:#333; margin-bottom:10px;  font-weight:bold; }
h2 {padding-left:10px; color:#333; font-weight:bold; }
/*关键部分*/
.box { display:-webkit-box; -webkit-box-orient:horizontal; width:900px; border:2px solid orange; }
.box>div { width:180px; background:#333; color:#fff; height:100px; margin:10px;  }
#wrap1 { -webkit-box-pack:start;}
#wrap2 { -webkit-box-pack:center;}
#wrap3 { -webkit-box-pack:end;}
#wrap4 { -webkit-box-pack:justify;}