`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。 ~~~css .item { flex-grow: <number>; /* default 0 */ } ~~~  ~~~html <div class="box"> <div class="box-item grow">1<div>(flex-grow: 1)</div></div> <div class="box-item grow-2">2<div>(flex-grow: 2)</div></div> <div class="box-item grow">3<div>(flex-grow: 1)</div></div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-item div { font-size: 14px; position: relative; top: -150px; } ~~~ 如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 ~~~css .grow { flex-grow: 1; } .grow-2 { flex-grow: 2; } ~~~  如果有的项目有 flex-grow 属性，有的项目有 width 属性，有 flex-grow 属性的项目将等分剩余空间。 ~~~html <div class="box"> <div class="box-item grow">1<div>(flex-grow: 1)</div></div> <div class="box-item">2<div>(width: 200px)</div></div> <div class="box-item grow">3<div>(flex-grow: 1)</div></div> </div> ~~~