Flex Grow プロパティ

最終更新：2026-09-13

flex-grow Flex Grow プロパティ

flex-grow プロパティは、flex アイテムの拡大率を設定します。コンテナー内の残りの空間をアイテムがどれだけ獲得できるかを決めます。デフォルト値は 0 で、これはアイテムが伸長せず元のサイズを保つことを意味します。値を大きくするほどアイテムの取り分は大きくなります。残りの空間は、すべてのアイテムの flex-grow 値に比例して分配されます。

カテゴリ
初期値	0
継承	いいえ
適用対象	flex アイテム
アニメーションタイプ	number
CSS バージョン	CSS3
状態	標準

📝 構文

flex-grow: <number>;

⚙️ 値

値	タイプ	説明
`<number>`	タイプ	拡大率。0 は伸長しないことを意味する。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-grow	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： flex-grow は単位のない比率で、負の値は受け付けません。残りの空間は flex-grow 値の比率に従って分けられ、たとえば 1:2:3 なら 1/6・2/6・3/6 に分配されます。

注意： flex-grow が効くのは、コンテナーに余白があるときだけです。アイテムがすでにコンテナーの幅を埋めている場合、flex-grow はそれらを縮めません。縮小させたい場合は flex-shrink を使います。

❓ よくある質問

Qflex-grow に小数を指定できますか？

Aできます。flex-grow は 0.5 のような小数を含め、任意の非負の数値を受け付けます。残りの空間はすべての flex-grow 値の相対的な比率で分けられるため、0.5 と 1 の組み合わせは 1 と 2 とまったく同じ挙動になります。重要なのは比率だけです。アイテムを倍にせず少しだけ伸ばしたい場合、0.5 や 0.3 のような小数が便利です。

Qflex-grow を設定したのにアイテムが伸びないのはなぜですか？

Aよくある原因は 3 つです。アイテムがすでに幅を埋め尽くしていてコンテナーに余白がない、親が display: flex を設定するのを忘れている、flex-basis が auto で内容がすでに基本サイズを最大まで押し上げている。まずコンテナーがアイテムの合計幅より広いか確認し、次に flex-basis を見直してください。flex-grow に分配を完全に任せるには、通常 flex-basis を 0 にします。

Q「flex-grow が分配するのは残りの空間であり、全体の幅ではない」とはどういう意味ですか？

Aflex はまず flex-basis（デフォルトは auto、つまり内容の幅）に従ってすべてのアイテムを配置します。残った部分が「残りの空間」であり、その部分だけが flex-grow によって比例で分けられます。たとえば 600px のコンテナーで 3 アイテムの内容の合計が 300px なら、分配されるのは残りの 300px だけです。つまりデフォルトの flex-basis では、flex-grow: 1 をしても flex-basis を 0 にしない限り等幅になりません。