Day 6: Flexbox

今日学ぶこと

• Flexboxの基本概念
• コンテナのプロパティ
• アイテムのプロパティ
• 実践的なFlexboxレイアウト

---

Flexboxとは

Flexbox（Flexible Box Layout）は、1次元のレイアウトを効率的に作るための仕組みです。要素を横並びや縦並びに配置し、スペースの分配や位置調整を簡単に行えます。

.container {
    display: flex;
}

flowchart LR
    subgraph Flex["Flexboxの軸"]
        Main["主軸（Main Axis）→"]
        Cross["交差軸（Cross Axis）↓"]
    end
    style Main fill:#3b82f6,color:#fff
    style Cross fill:#8b5cf6,color:#fff

---

コンテナのプロパティ

flex-direction

.row         { flex-direction: row; }          /* 横並び（デフォルト） */
.row-reverse { flex-direction: row-reverse; }  /* 横並び（逆順） */
.column      { flex-direction: column; }       /* 縦並び */
.col-reverse { flex-direction: column-reverse; }

justify-content（主軸方向の配置）

.container { display: flex; }

.start   { justify-content: flex-start; }    /* 始点寄せ */
.center  { justify-content: center; }        /* 中央 */
.end     { justify-content: flex-end; }      /* 終点寄せ */
.between { justify-content: space-between; } /* 均等配置（両端揃え） */
.around  { justify-content: space-around; }  /* 均等配置（両端に余白） */
.evenly  { justify-content: space-evenly; }  /* 完全均等 */

値	説明
flex-start	始点に寄せる
center	中央に配置
flex-end	終点に寄せる
space-between	両端揃え、均等分配
space-around	各アイテムの両側に均等余白
space-evenly	すべての間隔を均等

align-items（交差軸方向の配置）

.stretch  { align-items: stretch; }     /* 伸縮（デフォルト） */
.start    { align-items: flex-start; }  /* 上揃え */
.center   { align-items: center; }      /* 中央揃え */
.end      { align-items: flex-end; }    /* 下揃え */
.baseline { align-items: baseline; }    /* ベースライン揃え */

flex-wrap

.nowrap { flex-wrap: nowrap; }    /* 折り返さない（デフォルト） */
.wrap   { flex-wrap: wrap; }      /* 折り返す */

gap

.container {
    display: flex;
    gap: 16px;         /* 行と列の両方 */
    gap: 16px 24px;    /* 行間 列間 */
    row-gap: 16px;     /* 行間だけ */
    column-gap: 24px;  /* 列間だけ */
}

推奨: marginの代わりにgapを使うと、アイテム間のスペースをシンプルに管理できます。

---

アイテムのプロパティ

flex-grow / flex-shrink / flex-basis

.item {
    flex-grow: 1;     /* 残りスペースを均等に分配 */
    flex-shrink: 1;   /* スペース不足時に縮小 */
    flex-basis: 200px; /* 初期サイズ */
}

/* ショートハンド */
.item { flex: 1; }          /* flex: 1 1 0% */
.item { flex: 0 0 300px; }  /* 固定幅300px */
.item { flex: 1 1 200px; }  /* 200px基準で伸縮 */

flowchart LR
    subgraph FlexProperty["flexショートハンド"]
        Grow["flex-grow<br>伸びる割合"]
        Shrink["flex-shrink<br>縮む割合"]
        Basis["flex-basis<br>初期サイズ"]
    end
    style Grow fill:#22c55e,color:#fff
    style Shrink fill:#ef4444,color:#fff
    style Basis fill:#3b82f6,color:#fff

align-self

個別のアイテムだけ交差軸の配置を変更します。

.item-special {
    align-self: center;    /* このアイテムだけ中央 */
}

order

表示順序を変更します（HTML順序は変わりません）。

.first  { order: -1; }   /* 最初に表示 */
.last   { order: 1; }    /* 最後に表示 */

---

よくあるFlexboxパターン

1. 中央寄せ

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

2. ナビゲーションバー

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

3. カードグリッド（Flex wrap）

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card {
    flex: 1 1 300px;    /* 最小300px、伸縮あり */
    max-width: 400px;
}

4. フッターを最下部に固定

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;    /* 残りスペースをすべて占有 */
}

5. 左右分割

.split {
    display: flex;
}

.split-left  { flex: 1; }
.split-right { flex: 1; }
/* または */
.sidebar { flex: 0 0 300px; }
.content { flex: 1; }

---

実践: ナビゲーションバーとカードレイアウト

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ナビゲーション */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

.nav-links a {
    color: #64748b;
    text-decoration: none;
}

.nav-links a:hover {
    color: #3b82f6;
}

/* メインコンテンツ */
main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
    width: 100%;
}

/* カードグリッド */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.card {
    flex: 1 1 280px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    color: #64748b;
    font-size: 0.875rem;
}

/* フッター */
footer {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

---

まとめ

プロパティ	対象	説明
display: flex	コンテナ	Flexbox有効化
flex-direction	コンテナ	主軸の方向
justify-content	コンテナ	主軸方向の配置
align-items	コンテナ	交差軸方向の配置
flex-wrap	コンテナ	折り返し
gap	コンテナ	アイテム間の間隔
flex	アイテム	伸縮と初期サイズ
align-self	アイテム	個別の交差軸配置
order	アイテム	表示順序

重要ポイント

1. display: flexでFlexboxコンテナを作る
2. justify-contentは主軸、align-itemsは交差軸
3. gapでアイテム間のスペースを管理
4. flex: 1で残りスペースを均等分配

---

練習問題

問題1: 基本

Flexboxを使って、3つのカードを横に等幅で並べてください。

問題2: 応用

space-betweenを使ったナビゲーションバー（ロゴ左、リンク右）を作成してください。

チャレンジ問題

ページ全体のレイアウト（ヘッダー、サイドバー＋メインコンテンツ、フッター）をFlexboxだけで構築してください。

---

参考リンク

• MDN - Flexbox
• CSS-Tricks - A Complete Guide to Flexbox
• Flexbox Froggy — ゲームで学ぶFlexbox

---

次回予告: Day 7では「CSS Grid」について学びます。2次元のレイアウトを自在に操る技術をマスターしましょう。