`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> ~~~