レイアウト
flex-grow
flex-grow は、フレックスボックスの項目に書いて、箱の中で余った幅（縦に並べたときは高さ）を、その項目がどれだけもらって伸びるかを指定します。
構文
<number [0,∞]>プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
}
.box > :nth-child(2) {
flex-grow: 1;
}コントロール
flex-grow1
1234
解説
値の書き方
0 以上の数を単位なしで書きます。初期値は 0 で、伸びません。箱（フレックスボックス）ではなく、中の項目に書くプロパティです。
このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに flex-grow を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。縁取りした 2 の項目が、ほかの項目の残りの幅いっぱいに伸びます。
余りの分け方
まず、それぞれの項目を元の大きさ（flex-basis、初期値の auto なら width）で並べ、箱に余った幅を、flex-grow の数の比で分けます。1 と 2 の項目があれば、余りを 1 : 2 で分けます。伸びる項目が 1 つだけなら、値が 1 でも 2 でも余りを全部もらいます。
値の合計が 1 より小さいときは、余りを全部は配りません。0.5 の項目が 1 つだけなら、余りの半分だけ伸びます。
flex ショートハンド
ふつうは flex ショートハンドで、flex-shrink・flex-basis とまとめて書きます。flex: 1 は flex: 1 1 0% と同じで、元の大きさを 0 とみなすので、中身の量によらず項目を同じ幅に分けられます。flex-grow だけを書いた場合は元の大きさが中身から決まるので、余りを等分しても項目の幅はそろいません。