flex-grow

/* 伸長しない（初期値） */
.item { flex-grow: 0;}

/* 余白を均等に分配 */
.item-grow { flex-grow: 1;}

/* 特定のアイテムを2倍の割合で伸長 */
.item-double { flex-grow: 2;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

↑ prefix『-webkit-』が必要

21 以前 ×

Firefox

20 以降 ○

19 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 △

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『flex-grow』はフレックスアイテムに指定するプロパティで、コンテナ内に余白がある場合に、その余白をどの割合でアイテムに分配するかを指定します。初期値は『0』で、余白があってもアイテムは伸長しません。

『flex-grow』の値は「比率」として働きます。すべてのアイテムが『flex-grow: 1』なら余白は均等に分配されます。一つだけ『flex-grow: 2』にすると、そのアイテムは他のアイテムの2倍の余白を受け取ります。

/* コンテナの幅: 600px、アイテムの合計幅: 300px → 余白: 300px */

/* 全アイテムがflex-grow: 1の場合 → 各100pxずつ分配 */
.item-a { flex-grow: 1;}  /* 100px + 100px = 200px */
.item-b { flex-grow: 1;}  /* 100px + 100px = 200px */
.item-c { flex-grow: 1;}  /* 100px + 100px = 200px */

/* item-bだけflex-grow: 2の場合 → 1:2:1で分配 */
.item-a { flex-grow: 1;}  /* 100px + 75px = 175px */
.item-b { flex-grow: 2;}  /* 100px + 150px = 250px */
.item-c { flex-grow: 1;}  /* 100px + 75px = 175px */

/* サイドバー + メインコンテンツのレイアウト */
.layout {
    display: flex;
}
.sidebar {
    width: 250px;     /* 固定幅 */
    flex-shrink: 0;   /* 縮小しない */
}
.main {
    flex-grow: 1;     /* 残りのスペースをすべて使う */
}

/* すべてのアイテムを同じ幅にする */
.equal-container {
    display: flex;
}
.equal-item {
    flex-grow: 1;
    flex-basis: 0;  /* 基本サイズを0にして均等に分配 */
}

『flex-grow: 1』は「コンテナの余白を分配して伸長する」のに対し、『width: 100%』は「コンテナの幅いっぱいに広がる」です。フレックスアイテムが一つだけの場合は見た目が同じになりますが、複数のアイテムがある場合は動作が異なります。フレックスコンテナ内では『flex-grow』を使うのが適切です。