【flex-grow完全ガイド】CSS Flexboxで要素を伸ばす仕組みと使い方

はじめに

flex-grow は、Flexbox で要素がどれだけ余白を分配して伸びるかを決める重要なプロパティです。

しかし、実際の使い方は理解しづらく、思った通りに幅が調整できないケースが多くあります。

本記事では、flex-grow の基本、値ごとの挙動比較、flex プロパティとの組み合わせ、実際の使用例までを解説します。

flex-grow とは？基本の仕組み

flex-grow が担当する役割

flex-grow は、Flexbox コンテナ内の余白（余剰スペース） を、子要素にどの割合で配分するかを制御するプロパティです。

親要素の幅に対して子要素の合計幅が不足している場合に、flex-grow が設定された要素がその不足分（余白）を埋めてくれます。

例えば flex-grow: 1; の要素が 2 つあれば、余白は 1:1 で等しく分配されます。

flex-grow を理解するうえで、まず押さえておきたい重要なポイントをまとめました。

値ごとの意味の違い（0/1/2 など）

flex-grow の代表的な値の意味は次のとおりです。

値	意味
0	余白があっても伸びない
1	余白を均等に伸ばす
2 以上	値の比率に応じてより大きく伸びる

たとえば 3 つの要素に 0 / 1 / 2 を指定すれば、余白は「0 : 1 : 2」の比率で分配されます。

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

.box {
  width: 300px;
  height: 200px;
  display: flex;
}

.box1 {
  background-color: #fefd7a; /* イエロー */
  flex-grow: 0;
}

.box2 {
  background-color: #ffa0b6; /* ピンク */
  flex-grow: 1;
}

.box3 {
  background-color: #74e5c5; /* グリーン */
  flex-grow: 2;
}

このように、flex-grow の値によって余白を分配する比率が変わります。

box1 は flex-grow: 0 のため、余白があっても幅は伸びず、中身の要素がない場合は表示されなくなります。
一方で、box2（1）と box3（2）は余白を 1 : 2 の比率 で分け合うため、box3 の方が大きく表示されます。

値ごとの比較と挙動パターン

flex-grow の比率で幅が決まる仕組み

flex-grow は、単純に「伸びるか伸びないか」ではなく、総和に対する比率で動作します。

例えば、以下のように 3 要素へ設定した場合を考えます。

• A → flex-grow: 1
• B → flex-grow: 2
• C → flex-grow: 1

この場合、余白分配の比率は 1 : 2 : 1 となり、A と C が同じだけ伸び、B はその 2 倍伸びます。

比率で決まるため、絶対値自体に意味はなく、相対的な大きさのみ影響します。
つまり、 1 : 2 : 1 と 10 : 20 : 10 は挙動が完全に同じです。

よくあるつまずきポイント

実務で多いトラブルは以下の通りです。

flex-basis が想定外に効く

basis の初期値は auto。中身の幅が優先されるため、grow が効きにくい。

余白がゼロだと伸びない

grow は余白を“分配”する仕組みなので、そもそも余白がないケースでは効果ゼロ。

子要素の min-width が邪魔する

grow で伸びても、縮小側（shrink）が min-width に引っかかると崩れる。

これらの理解が不足していると、レイアウトが思った通りに動作しません。

flex-grow と flex-basis・flex-shrink の関係

flex-basis の優先度

flex-grow は余白を分配するプロパティですが、その“出発点”となる幅は flex-basis によって決まります。

flex-basis は“初期サイズ”を決めるため、grow より優先されます。

flex-basis: auto（初期値）

→ 中身の幅や width が基準になる

flex-basis: 0

→ 中身の幅を無視して純粋に grow の比率で伸ばせる

特に、複数要素を比率で綺麗に伸ばしたい場合は、flex-basis: 0 の利用が有効です。

flex-shrink との連動挙動

flex-shrink は“縮む割合”を制御するプロパティで、grow と対になる存在です。

• grow : 余白があるとき伸ばす
• shrink : 幅が足りないとき縮める

この 2 つは同じ flex アイテムの挙動を左右するため、レイアウト調整ではセットで考える必要があります。

特に、shrink が有効で min-width を下回れない場合、grow が意図通りに効かず、「伸びたり縮んだりが不安定」な状態に見えることがあります。

実装で使う flex-grow 応用テクニック

カード UI・カラムレイアウト例

flex-grow はカードレイアウトや複数カラムの均等配置に非常に有効です。

例：高さを揃えたいカード UI

<div class="cards">
  <div class="card">
    <p class="card-body">テキスト量が少ないカードです。</p>
    <button href="#" class="card-button">詳しく見る</button>
  </div>
  <div class="card">
    <p class="card-body">
      こちらはテキスト量が多いカードです。文章が増えても、ボタンの位置は下で揃います。
    </p>
    <button href="#" class="card-button">詳しく見る</button>
  </div>
</div>

.cards {
  display: flex;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 1; /* 横幅を均等 */
}

.card-body {
  flex-grow: 1;
}

このように、カード本文に flex-grow を設定すると、テキスト量が異なっても「ボタンを下揃え」にでき統一感のある UI が作れます。

なお、flex-grow が余白を割り振る方向は flex-direction によって決まり、この例では flex-direction: column を指定しているため、縦方向の余白がカード本文に配分されています。

例：比率で幅を決める 2 カラム

<div class="columns">
  <div class="left"></div>
  <div class="right"></div>
</div>

.columns {
  width: 300px;
  height: 200px;
  display: flex;
}

.left {
  flex: 1;
  background-color: #ffa0b6;
}

.right {
  flex: 2;
  background-color: #74e5c5;
}

この例では flex-direction: row（初期値）のため、flex-grow は横方向の余白を比率に応じて分配します。
左右のカラムを比率ベースで柔軟に構築でき、レスポンシブデザインで特に重宝します。

レイアウト崩れの原因と解決法

実務で発生しやすい崩れと解決策は以下の通りです。

flex-grow 自体に問題があるのではなく、他プロパティとの相互作用で意図しない結果になるケースが多いため、“組み合わせ”を意識することが重要です。

まとめ

ここまで解説した通り、flex-grow は単独で考えるのではなく、次の観点を押さえることが重要です。

これらを理解しておくことで、Flexbox レイアウトの安定性が格段に高まります。

また、こうした基礎から HTML/CSS を始めとする Web 制作スキルを学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアの個別サポートにより、初心者でも疑問を素早く解決でき、効率的に学習を進められます。

正しいコードを理解して、綺麗なコードを身につけましょう。