Day 3 です。
昨日は「配置（左寄せ・中央寄せ）」を学びましたが、今日は 「伸縮（伸び縮み）」 をマスターします。
これを理解すると、「画面幅が変わっても、検索バーの入力欄だけが伸び、ボタンのサイズはそのまま」 といったレスポンシブな UI が作れるようになります。
🎯 本日の目標
-
flex-grow(伸びる) とflex-shrink(縮む) の仕組みを理解する。 - 省略記法
flex: 1;を使いこなす。 - Web レイアウトの定番、 「聖杯レイアウト（Holy Grail Layout）」 を作る。
📝 ミッション内容
今日は 2 段階構成です。まずは小さなパーツで実験し、その後にページ全体のレイアウトを作ります。
Step 1: 検索バーを作る（伸びる要素の実験）
検索窓を作ります。
- 親要素の中に、
<input>（入力欄）と<button>（検索ボタン）を置いてください。 - 親要素に
display: flex;をかけます。 -
課題: 入力欄 (
input) だけに CSS を書き足して、 「ボタンの幅は固定のまま、入力欄だけが余ったスペース一杯に広がる」 ようにしてください。
Step 2: 聖杯レイアウトを作る（ページ全体の構成）
「ヘッダー」「フッター」「3 カラムのメインエリア」を持つレイアウトを作ります。
-
構造:
- 上：ヘッダー (Header)
- 中：メインエリア (Container) ※ここを Flexbox にする
- 左：メニュー (Left Sidebar) - 幅 150px 固定
- 中：コンテンツ (Main Content) - 可変（残りの幅すべて）
- 右：広告枠 (Right Sidebar) - 幅 150px 固定
- 下：フッター (Footer)
- 課題: 画面幅を広げたり狭めたりした時、左右のサイドバーの幅は変わらず、 真ん中のコンテンツ部分だけが伸縮する ようにしてください。
💻 実装サンプル
まずは自分で実装してみてください。詰まったら以下のコードを参考にしてください。
Step 1 正解例
See the Pen CSSマスターへの道「Flexbox(応用編)」Step.1 by サカツ (@saka2jp) on CodePen.
Step 2 正解例
See the Pen CSSマスターへの道「Flexbox(応用編)」Step.2 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
Flexbox のアイテム（子要素）には、3 つの重要なプロパティがあります。これをまとめて指定できるのが flex ショートハンドです。
1. flex-grow (成長係数)
- 「余ったスペースがあった場合、どれくらいの比率で分配するか」を指定します。
-
0(デフォルト): 伸びない。 -
1: 伸びる。 - 兄弟要素すべてが
1なら等分されます。片方が2なら、その要素は 2 倍の余白を受け取ります。
2. flex-shrink (収縮係数)
- 「スペースが足りなくなった時、どれくらいの比率で縮むか」を指定します。
-
1(デフォルト): 縮む。 -
0: 縮まない。 - サイドバーの幅をピクセル固定(
width: 150px)していても、画面が極端に狭くなると Flexbox は無理やり収めようとしてサイドバーを縮めます。これを防ぐために.sidebarにflex-shrink: 0;を指定します。
3. 省略記法 flex: 1;
実務では flex-grow: 1 と書く代わりに、以下をよく使います。
.item {
flex: 1;
}
これは 「幅の指定を無視して、余った場所を全部埋める（伸びる）」 という意味で、非常によく使われます。
（厳密には flex-grow: 1; flex-shrink: 1; flex-basis: 0%; の略です）
💡 補足：聖杯レイアウトとは
「聖杯レイアウト (Holy Grail Layout)」 とは、2000 年代に CSS で実現が困難だったレイアウトパターンです。
「ヘッダー・フッターがあり、中央が 3 列で、左右のカラム幅固定・中央可変、かつ 3 列の高さが揃う」という要件を満たすレイアウトは、当時の技術では実装が難しく、理想郷として「聖杯」と呼ばれていました。
Flexbox の登場により、数行の display: flex と flex: 1 で実現できるようになりました。
おわりに
これで「並べる」「揃える」「伸縮させる」という Flexbox の 3 大機能を習得しました。
次回は、Flexbox と双璧をなすレイアウト技術、 「CSS Grid」 に進みます。2 次元のレイアウトを扱います。