CSSのflex-grow完全ガイド｜要素を柔軟に拡張する方法と使い方を徹底解説

html css js

Aerial view of a man using computer laptop on wooden table

2025.06.25

Webデザインにおいて、柔軟なレイアウトを実現するためにはCSSのFlexboxは欠かせない存在です。中でもflex-growプロパティは、可変のスペースをどの要素にどのくらい配分するかを決める重要なプロパティです。この記事では、flex-growの基本から応用、他のプロパティとの組み合わせまでをわかりやすく解説します。実際のコード例も交えて、初心者の方にも理解しやすく構成しています。CSSでレスポンシブなレイアウトを作りたい方は、ぜひ最後までご覧ください。

flex-growとは？役割と基本の考え方
1. 初期値は0
flex-growの具体的な使い方
1. 基本的なHTMLとCSS例
2. 複数のflex-growの値を変えて比較
他のFlexboxプロパティとの関係
1. flex-shrinkとの違い
2. flex-basisと一緒に使う
実用例：ナビゲーションバーでの使用
よくある間違いと注意点
1. 1. flex-growだけではサイズが変わらないことがある
2. 2. 全ての要素に同じflex-growを設定すると…？
flexショートハンドで指定する方法
まとめ：flex-growで柔軟なデザインを実現しよう

flex-growとは？役割と基本の考え方

flex-growは、Flexboxレイアウトの中で要素が余白をどれだけ広げるかを決めるプロパティです。親要素にdisplay: flexが指定されているとき、子要素のflex-growの値に応じて余白を分配します。

例えば以下のように設定すると：

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}

この場合、.item2は.item1の2倍の余白を受け取ることになります。つまり、合計3の中で1:2の比率でスペースが分けられます。

初期値は0

特に指定しない限り、flex-growの初期値は0です。つまり、親の余白があっても要素のサイズは広がりません。

flex-growの具体的な使い方

基本的なHTMLとCSS例

<div class="container">
  <div class="item">A</div>
  <div class="item grow">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
  width: 600px;
}

.item {
  width: 100px;
  background: lightgray;
  margin: 5px;
  text-align: center;
}

.grow {
  flex-grow: 1;
}

この例では、真ん中のBだけが余ったスペースを引き受けて広がります。

複数のflex-growの値を変えて比較

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 3; }

それぞれが、合計6の割合で1:2:3のスペース配分になります。

他のFlexboxプロパティとの関係

flex-shrinkとの違い

flex-grow: 要素が余ったスペースをどれだけ「増えるか」
flex-shrink: 要素が親より大きいとき、どれだけ「縮むか」

それぞれ独立して働くので、組み合わせて細かい調整ができます。

flex-basisと一緒に使う

.item {
  flex-grow: 1;
  flex-basis: 200px;
}

この場合、初期サイズが200pxで、さらに余白があればそれに応じて伸びます。

実用例：ナビゲーションバーでの使用

Webサイトのナビゲーションバーなどで、特定の要素にだけ余白を持たせる場合に便利です。

<nav class="nav">
  <div class="logo">LOGO</div>
  <div class="menu">MENU</div>
  <div class="spacer"></div>
  <div class="user">User</div>
</nav>

.nav {
  display: flex;
  align-items: center;
}

.spacer {
  flex-grow: 1;
}

spacerが空白を埋めることで、userを右端に配置できます。

よくある間違いと注意点

1. flex-growだけではサイズが変わらないことがある

親要素に余白がなければ、flex-growは効果を発揮しません。例えば親がwidth: auto;や中身ピッタリだと変化しません。

2. 全ての要素に同じflex-growを設定すると…？

均等にスペースが分配されます。これは便利ですが、意図しないレイアウトになることもあるため確認が必要です。

flexショートハンドで指定する方法

flexプロパティを使えば、以下のようにまとめて指定できます：

.item {
  flex: 1 1 0%;
}

これは以下と同じ意味です：

flex-grow: 1
flex-shrink: 1
flex-basis: 0%

より短く、シンプルに書けるのでおすすめです。

まとめ：flex-growで柔軟なデザインを実現しよう

flex-growは、レスポンシブデザインや動的なレイアウトにおいて非常に強力なツールです。値の設定によってスペースの配分をコントロールできるため、ユーザー体験に直結するレイアウト設計が可能になります。

特に以下のような場面で活用できます：

ナビゲーションバーの調整
カードの横並びデザイン
レスポンシブなグリッドレイアウト

ぜひ、自分のプロジェクトにflex-growを取り入れて、より魅力的なWebデザインを作ってみてください。