Flexbox

web development coding-style beginner

CSSで要素の配置や整列、余白を簡単かつ柔軟に設計できるレイアウト手法。

概要（サマリー）

Flexbox（フレックスボックス）は、CSSでWebページのレイアウト（要素の配置）を行うための非常に便利で柔軟（Flexible）な仕組みである。

かつてWebデザインで要素を横並びにするには、複雑なCSSハックや回りくどい設定が必要だったが、Flexboxの登場によって、親要素に「横並びにしてね」と1行指示を書くだけで、子要素をきれいに整列させたり、均等にスペースを空けたりすることが可能になった。モダンなWebデザインやレスポンシブデザインには欠かせない技術である。

詳細解説

Flexboxとは何か

Flexbox（正式名称: Flexible Box Layout）は、1次元（縦または横の1方向）のレイアウトを直感的かつ柔軟にデザインするために設計されたCSSの仕様である。

画面幅が異なるスマートフォン、タブレット、PCなどの様々な端末に合わせて、要素のサイズや位置を自動的に引き伸ばしたり、縮めたり、余白をきれいに分配したりすることができる。

コンテナとアイテム（親子関係）

Flexboxを理解する上で最も重要なのが、HTML上の「親子関係」の概念である。

フレックスコンテナ（親要素）: display: flex; を指定した要素。この要素が「レイアウトの土台」となり、その中身をどのように並べるかを決定する。
フレックスアイテム（子要素）: コンテナの直下にある要素。自動的にFlexboxのルールに従って整列される。

よく使う主要なCSSプロパティ

親要素（コンテナ）に以下の指示を与えることで、子要素の並び方を自在にコントロールできる。

flex-direction: 要素を並べる「方向」を決める。横並び（デフォルト）か、縦並び（column）かを指定する。
justify-content: 並べた方向に対する「配置」を決める。始端寄せ、中央寄せ、終端寄せ（横書きの横並びなら左・中央・右）のほか、「均等配置（space-between）」などを指定できる。
align-items: 並べた方向と「垂直な方向」に対する配置を決める。例えば、高さの異なる要素を上下の中央（center）で揃えることができる。
flex-wrap: 要素が画面幅に入り切らなくなったときに、「折り返す（wrap）」か「無理やり1行に押し込む（nowrap）」かを決める。

基本的なコード例

以下は、3つのボックスを横並びにし、まとめて上下左右の中央へ置く基本的なHTML/CSSの例である。

HTML構造

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS指定

/* 親要素（コンテナ）に指定 */
.flex-container {
  display: flex; /* これでFlexboxが有効になり、子要素が横並びになる */
  justify-content: center; /* 横方向の中央にまとめる */
  align-items: center; /* 縦方向の中央に揃える */
  gap: 16px; /* ボックスの間を空ける */
  height: 200px;
  background-color: #f0f0f0;
}

/* 子要素（アイテム）に指定 */
.flex-item {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 50px;
}

この指定だけで、3つのボックスは領域の中央に集まり、間隔もコード側で指定した幅になる。左右へ余白を分配したいときは、justify-content を space-around や space-between に変える。

プロパティの動きは、次の解説でボタン操作しながら確認できる。

画面幅に応じて並び方向を切り替える方法は、次の解説で扱っている。

AIコーディングとの関係

AIに「Webサイトのヘッダーを横並びにしたい」「画像をグリッド状に折り返して表示したい」といったCSSレイアウトを依頼する際、Flexboxを指定して依頼すると、非常にきれいでメンテナンスしやすいCSSコードを提案してもらえる。

AIに指示を出すときは、以下のように伝えるとよい。

HTMLの `<header>` の中にロゴとナビゲーションメニュー（`<ul>`）があります。
CSSのFlexboxを使って、ロゴを左端に、ナビゲーションを右端に配置し、それぞれの高さが上下中央で揃うようにレイアウトしてください。

AIはこのプロンプトを解釈し、親要素に display: flex;、justify-content: space-between;、align-items: center; を設定した正確なCSSコードを出力してくれる。

よくある勘違い

縦並びのレイアウトには使えない？

「横並びにするためのツール」だと思われがちだが、flex-direction: column; を設定することで、要素を縦に並べた上で均等配置や上下中央揃えを行うこともできる。スマートフォンのメニュー画面や、カード型UIの内部の縦方向の配置など、縦並びの制御にも頻繁に使用される。

CSS Grid（グリッドレイアウト）と何が違う？

両者は、得意とするレイアウトの「次元」が異なる。

Flexbox: 1次元（縦列のみ、または横行のみのどちらか一方）の整列に向いている。
CSS Grid: 2次元（縦と横の格子）のレイアウトに向いている。

Webサイト全体の格子はCSS Gridで設計し、その中の細かいパーツ（ヘッダー内の要素やボタン）の並びはFlexboxで制御する、というように使い分けることが多い。

display: flex を指定したのに横並びにならない？

display: flex; は「直下の子要素（アイテム）」にしか効かない。孫要素（子要素の中にあるさらに下の要素）は自動的には横並びにならないため、それらも並べたい場合は、子要素にも重ねて display: flex; を指定し、親コンテナ化（入れ子）にする必要がある。

まとめ

Flexboxは、CSSで1次元のレイアウトを柔軟に制御するための仕組みである。
親要素に display: flex; を書くことで、子要素の並び方を制御できるようになる。
左右の配置（justify-content）や上下の配置（align-items）を感覚的に制御できる。
AIにレイアウト作成を依頼する際も、「Flexboxを使って」と指定すると良質なコードが得られやすい。

情報ソース

MDN Web Docs: Flexbox の基本概念

より詳しくAIに聞いてみよう

CSSのFlexboxで、要素を「完全に上下左右の真ん中（中央）」に配置するための最もシンプルなコードを教えてください。
justify-content で指定できる値（space-between, space-around, space-evenly）の違いを、初心者向けにビジュアルイメージを交えて教えてください。
スマホ表示時は「縦並び」、PC表示時は「横並び」にFlexboxで切り替えるためのCSSメディアクエリの具体的な書き方を教えてください。
FlexboxとCSS Grid（グリッドレイアウト）は、それぞれどのようなデザインを作る時に使い分ければよいですか？
AIに「Flexboxを使って、崩れにくくレスポンシブに対応したナビゲーションバー」のHTML/CSSを作ってもらうための具体的な指示文を教えてください。