FlexboxとGrid

FlexboxとGridとは

Flexbox と Grid は、[[CSS]] で要素を配置するための現代の2大レイアウト機能です。かつて float や position で無理やり組んでいたレイアウトを、宣言的に・簡潔に書けるようにしました。

Flexbox — 要素を1次元(横一列 or 縦一列)に並べる。折り返しや余白の分配が得意
Grid — 2次元(行と列)の格子を定義し、そこに要素を配置する。ページ全体の骨格が得意

Flexboxの基本

.container {
  display: flex;
  justify-content: space-between; /* 主軸方向の配置 */
  align-items: center;            /* 交差軸方向の配置 */
  gap: 16px;                      /* 要素間の余白 */
}

親要素に display: flex を指定すると、子要素が横に並びます。主軸(並ぶ方向)と交差軸(直交する方向)という2つの軸で配置を制御するのがポイントです。ナビゲーションバー、ボタンの横並び、「アイコン+テキスト」の中央揃えなど、日常のレイアウトの大半をカバーします。

Gridの基本

.layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左200px、右は残り全部 */
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

親要素に行と列の設計図を書き、子要素をマス目に配置します。fr という単位は余った空間の分配比率を表します。「ヘッダー・サイドバー・メイン・フッター」のようなページ全体の骨格や、カードのタイル状配置に向きます。

使い分けの目安

状況	選択
要素を一方向に並べたい(ナビ、ボタン列)	Flexbox
行と列の両方を揃えたい(ページ骨格、カード一覧)	Grid
中身の量に応じて柔軟に伸縮させたい	Flexbox
先にマス目を決めて流し込みたい	Grid

両者は排他ではなく、Gridで骨格を作り、各マスの中をFlexboxで整える組み合わせが実務の定番です。また repeat(auto-fit, minmax(200px, 1fr)) のような書き方で、メディアクエリなしに列数が変わる [[レスポンシブデザイン]] も実現できます。

関連技術とのつながり

[[CSS]] — FlexboxとGridはCSSのレイアウトモジュール
[[レスポンシブデザイン]] — 画面幅に応じた再配置の中核技術
[[Tailwind CSS]] — flex や grid をユーティリティクラスとして提供する
[[HTML]] — レイアウトの対象となる文書構造

Q: FlexboxとGridの違いとして正しいのはどれ?
- [x] Flexboxは1次元、Gridは2次元のレイアウトが得意
- [ ] Flexboxは2次元、Gridは1次元のレイアウトが得意
- [ ] 両者に違いはなく完全に置き換え可能
解説: Flexboxは一方向に並べるレイアウト、Gridは行と列の格子で組むレイアウトに向いています。

Q: Gridの「1fr」という単位が表すものはどれ?
- [ ] 1ピクセルの固定幅
- [ ] フォントサイズの1倍
- [x] 余った空間の分配比率
解説: frは残り空間をどんな比率で分けるかを表す単位で、200px 1fr なら左200px・右が残り全部になります。

Q: 実務での定番の組み合わせとして本文で挙げられているのはどれ?
- [ ] floatで骨格を作り、positionで微調整する
- [x] Gridで骨格を作り、各マスの中をFlexboxで整える
- [ ] テーブルタグですべてのレイアウトを組む
解説: ページ全体の骨格はGrid、その中の要素の整列はFlexbox、という併用が定番です。