CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － flex-grow活用

Web APP CSS
スポンサーリンク

flex-grow を理解すると「余った幅の配分」が思い通りになる

flex-grow は、Flexbox の中でも 「余ったスペースをどの子要素にどれだけ渡すか」 を決めるプロパティです。
「このボックスは広がってほしい」「このボタンだけ横に伸びてほしい」みたいなときに、本領を発揮します。

CSS と Tailwind CSS の両方で、初心者でもイメージしやすいように、実例ベースで解説していきます。

flex-grow の基本概念

0 と 1 の違いをまず押さえる

flex-grow の初期値は 0 です。
0 のとき、その要素は「余ったスペースをもらわない」＝必要な分だけの幅になります。
1 にすると、「余ったスペースを他の要素と分け合って広がる」ようになります。

つまり、

  • flex-grow: 0; → 広がらない
  • flex-grow: 1; → 余白をもらって広がる

Tailwind ではそれぞれ

  • grow-0
  • grow

で表現します。

例1：片方だけ横に伸びるレイアウト

CSS 版

.container {
  display: flex;
  gap: 8px;
}

.label {
  flex-grow: 0; /* デフォルトなので書かなくてもOK */
}

.input {
  flex-grow: 1;
}
CSS
<div class="container">
  <div class="label">名前</div>
  <div class="input">
    <input type="text" style="width: 100%;">
  </div>
</div>
HTML

この場合、「名前」は必要な幅だけ、「入力欄」は余ったスペースをすべて受け取って横に伸びます。

Tailwind 版

<div class="flex gap-2">
  <div class="shrink-0">
    名前
  </div>
  <div class="grow">
    <input type="text" class="w-full border border-gray-300 rounded px-2 py-1">
  </div>
</div>
HTML

ここでのポイントは、grow を付けた要素が「残りの幅を全部もらう」役になることです。

例2：3カラムを均等に伸ばす

CSS 版

.columns {
  display: flex;
  gap: 12px;
}

.columns > div {
  flex-grow: 1;
}
CSS
<div class="columns">
  <div>カラム1</div>
  <div>カラム2</div>
  <div>カラム3</div>
</div>
HTML

3つのカラムが、余った幅を均等に分け合って同じ幅になります。

Tailwind 版

<div class="flex gap-3">
  <div class="grow bg-gray-100 p-4 rounded">カラム1</div>
  <div class="grow bg-gray-100 p-4 rounded">カラム2</div>
  <div class="grow bg-gray-100 p-4 rounded">カラム3</div>
</div>
HTML

「均等カラム」を作るとき、grow を揃えて付けるのはかなり実用的なパターンです。

例3：比率を変えて幅を配分する（1:2:1 など）

CSS 版

.columns {
  display: flex;
  gap: 12px;
}

.left {
  flex-grow: 1;
}

.center {
  flex-grow: 2;
}

.right {
  flex-grow: 1;
}
CSS
<div class="columns">
  <div class="left">左</div>
  <div class="center">中央</div>
  <div class="right">右</div>
</div>
HTML

この場合、余った幅は「1 : 2 : 1」の比率で分配されます。
中央カラムが左右の2倍の幅になります。

Tailwind 版（任意値を使う）

Tailwind には grow-2 のようなプリセットはないので、任意値を使います。

<div class="flex gap-3">
  <div class="grow bg-gray-100 p-4 rounded">左</div>
  <div class="[flex-grow:2] bg-gray-100 p-4 rounded">中央</div>
  <div class="grow bg-gray-100 p-4 rounded">右</div>
</div>
HTML

「比率で幅を決めたい」とき、flex-grow を数字でコントロールするのはとても強力です。

例4：ヘッダーで「ロゴ＋ナビ＋右側ボタン」を気持ちよく配置

CSS 版

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  flex-grow: 0;
}

.nav {
  flex-grow: 1;
}

.actions {
  flex-grow: 0;
}
CSS
<header class="header">
  <div class="logo">LOGO</div>
  <nav class="nav">
    メニュー1 メニュー2 メニュー3
  </nav>
  <div class="actions">
    <button>ログイン</button>
  </div>
</header>
HTML

ナビ部分だけが余ったスペースを受け取り、ロゴとボタンは必要な幅だけになります。

Tailwind 版

<header class="flex items-center gap-4 px-4 py-2 border-b">
  <div class="shrink-0 font-bold">
    LOGO
  </div>
  <nav class="grow text-sm text-gray-600">
    メニュー1 メニュー2 メニュー3
  </nav>
  <div class="shrink-0">
    <button class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded">
      ログイン
    </button>
  </div>
</header>
HTML

ここでは grow をナビにだけ付けることで、「真ん中が伸びるヘッダー」が自然に作れます。

flex-grow の深掘りポイント

「余ったスペース」をどう分けるか、という発想が大事

flex-grow は「元の幅」ではなく、コンテナの中に余ったスペースをどう配るかを決めます。
ベースとなる幅（コンテンツの幅や flex-basis）に対して、
「余り」をどの要素がどれだけもらうか、というイメージです。

例えば、

  • 全員 flex-grow: 0 → 誰も余白をもらわない
  • 全員 flex-grow: 1 → 余白を均等に分け合う
  • 一部だけ flex-grow: 1 → その要素だけが余白を独占する

この3パターンを頭に入れておくと、ほとんどのレイアウトが説明できます。

flex: 1 と flex-grow: 1 の違いも軽く触れておく

よく見る flex: 1; は、実は

flex: 1 1 0;
CSS

の省略形です。

つまり、

  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: 0;

をまとめて指定しています。

Tailwind の flex-1 はこの flex: 1 1 0; に対応します。

<div class="flex">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
</div>
HTML

grow は「余白の配分」だけを変えたいとき、
flex-1 は「ベース幅も含めてガッと均等にしたいとき」
という感覚で使い分けると整理しやすいです。

実践テンプレート：よく使う flex-grow パターン

入力欄だけ伸びるフォーム行

<div class="flex items-center gap-2">
  <label class="shrink-0 text-sm text-gray-700">メール</label>
  <div class="grow">
    <input class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
  </div>
</div>
HTML

真ん中のカラムだけ広い 3 カラム

<div class="flex gap-3">
  <aside class="grow bg-gray-100 p-4 rounded">サイド1</aside>
  <main class="[flex-grow:2] bg-white p-4 rounded shadow">メイン</main>
  <aside class="grow bg-gray-100 p-4 rounded">サイド2</aside>
</div>
HTML

まとめ

flex-grow は、Flexbox の中で「余ったスペースの配分」を決めるキーとなるプロパティです。

CSS では
flex-grow: 0;（広がらない）
flex-grow: 1;（余白をもらって広がる）

Tailwind では
grow-0
grow

を軸に考えれば十分実戦レベルです。

「どの要素に余白を渡したいか？」
「どの要素はコンテンツの幅だけでいいか？」
この問いを自分に投げながら flex-grow を使っていくと、レイアウトのコントロールが一気に気持ちよくなります。

スポンサーリンク
タイトルとURLをコピーしました