フレックスアイテムの伸長係数を指定します。フレックスアイテムの横幅の合計が、フレックスコンテナのコンテンツ領域の幅に達しない場合に、伸長係数に従い、フレックスアイテムの横幅が伸長されます。flex-direction が column や column-reverse の場合は、高さに対して適用されます。負数を指定することはできません。フレキシブルボックスについての概要は flex を参照してください。

下記の例では、boxA, boxB, boxC の幅をおおよそ 1:2:3 の割合で表示します。

.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  text-align: center;
}
.boxA { flex-grow: 1; background-color: #fcc; }
.boxB { flex-grow: 2; background-color: #cfc; }
.boxC { flex-grow: 3; background-color: #ccf; }

<div class="flexbox">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

• http://www.w3.org/TR/css-flexbox-1/#flex-grow-property
• https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow
• http://caniuse.com/#feat=flexbox