目录

flex-grow

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

 

语法

flex-grow: <number>

值

值描述
<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;
}

执行结果


跳至内容顶部