flex-grow

flex-grow 属性规定弹性盒子项（flex item）的拉伸比率。

flex-grow: <number>

HTML

<ul id="box" class="box">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

CSS

.box{
  display:-webkit-flex;
  display:flex;
  width:600px;
  margin:0;
  padding:10px;
  list-style:none;
  background-color:#333;}
.box li{
  width:100px;
  height:100px;
  border:1px solid #aaa;
  text-align:center;
  color:#fff;
}
#box li:nth-child(2){
  flex-grow:1;
}
#box li:nth-child(3){
  flex-grow:2;
}

执行结果

• a
• b
• c
• d
• e