このレッスンを読み終えると、以下の3つに自信を持てるようになります。

• ▸✅ Content / Padding / Border / Margin の4領域
• ▸✅ box-sizing: border-box が標準である理由
• ▸✅ Margin Collapsing の解決パターン

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じてください。

一行でまとめると

Flexbox = 一方向（横または縦）に柔軟に整列するCSSツール。2015年の標準化以降、モダンCSSレイアウトの主流となっています。古いfloat·table時代は終わりました。

基本的な使い方

.container {
    display: flex;           /* flex開始 */
    gap: 16px;               /* 子要素間の間隔 */
}

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

A·B·Cが横一列に並びます。直感的でシンプルです。

2つの軸 — main vs cross

                 main axis →
              ┌────────────────┐
       cross  │  ┌─┐ ┌─┐ ┌─┐  │
        axis  │  │A│ │B│ │C│  │
          ↓   │  └─┘ └─┘ └─┘  │
              └────────────────┘

• ▸main axis — 主方向（デフォルトは横）
• ▸cross axis — 垂直方向

flex-direction: column で縦方向に切り替えることもできます。

整列 — この2つだけ覚えればOK

.container {
    display: flex;
    justify-content: center;    /* main軸の整列（横） */
    align-items: center;        /* cross軸の整列（縦） */
}

値5種類 (justify-content):

• ▸flex-start — 先頭に揃える
• ▸center — 中央に揃える
• ▸flex-end — 末尾に揃える
• ▸space-between — 両端 + 均等な間隔
• ▸space-around / space-evenly — 両側と間に均等な間隔

よく使う3つのパターン

1. ヘッダー — ロゴを左、メニューを右に:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

2. 中央揃え（横・縦ともに）:

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

CSSの永遠の課題「中央揃え」がたった2行で解決。

3. 子要素の比率 — flexプロパティ:

.main { flex: 3; }       /* 3倍 */
.sidebar { flex: 1; }    /* 1倍 */
/* mainがsidebarより3倍大きい */

flexショートハンド

.item {
    flex: 1 1 200px;
    /* flex-grow flex-shrink flex-basis */
    /* 伸びる比率 / 縮む比率 / 基本サイズ */
}

よく使うショートハンド:

• ▸flex: 1 — 可能な限り均等にスペースを占有する
• ▸flex: 0 0 200px — 固定 200px、伸縮しない

まとめ

• ▸display: flex + gap + justify-content + align-items = レイアウトの99%
• ▸一方向の整列に最適化
• ▸2次元（行+列）はGridを使用
• ▸古いfloat·tableは完全に廃止 — Flexboxが標準

このレッスンの概念を理解すれば、AIに具体的に指示できるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このヘッダーをFlexboxで左(ロゴ) + 中央(メニュー) + 右(ボタン)に整列してください」
• ▸「このカードグリッドをflex-wrapでモバイル1列・デスクトップ3列にしてください」
• ▸「align-itemsとjustify-contentがこんがらがっているので、はっきり整理してください」

なぜトークンが節約できるのか

概念を知らない状態では、AIの回答を受け取っても「それはどういう意味ですか?」と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度習得しておけば、会話が一回で完結します。