flex-grow

by xiaomei Yang

HTML

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
</div>
<p>box1占容器的1份，box2占容器2份，整个容器可以看作三等份</p>

CSS

.container{
  width:300px;
  height:200px;
  display:-webkit-flex;
  display:flex;
}
.box:first-child{
  -webkit-flex-grow:1;
  flex-grow:1;
  background:pink;
}
.box:nth-child(2){
  -webkit-flex-grow:2;
  flex-grow:2;
  background:orange;
}