AI先生のロボットキャラクター
第2章 - セクション2

Flexboxの基本

フレックスコンテナーとアイテムの関係、主軸と交差軸の理解

Flexbox 一次元レイアウト フレックスコンテナー 主軸
男子生徒のアイコン

モダンレイアウトの話を聞いて興味が湧きました！まずはFlexboxから学ぶんですよね？

AI先生のアイコン

そうだね。Flexboxは一方向に要素を並べるのが得意なレイアウト技術だ。ナビゲーションやボタン配置など、使う場面はとても多いよ。

女子生徒のアイコン

一方向って、横一列とか縦一列ってことですか？

AI先生のアイコン

その通り。floatみたいに複雑な調整をしなくても、シンプルなコードで綺麗に並べられるんだ。まずは基本の仕組みから見ていこう。

Flexboxとは何か

Flexbox（正式名称：Flexible Box Layout）は、一次元方向に要素を柔軟に配置するためのCSSレイアウト技術です。横一列または縦一列に要素を並べる場面で威力を発揮します。

用語の確認（コンテナー／アイテム）

Flexboxでは、親要素と子要素に特別な名前があります。

フレックスコンテナー（親要素）
display: flex を指定した要素
アイテム
子要素1
アイテム
子要素2
アイテム
子要素3

コード例

HTML
<div class="container">     ← フレックスコンテナー（親要素）
    <div>アイテム</div>    ← フレックスアイテム（子要素1）
    <div>アイテム</div>    ← フレックスアイテム（子要素2）
    <div>アイテム</div>    ← フレックスアイテム（子要素3）
</div>
CSS
.container {
    display: flex;  /* この親要素がフレックスコンテナーになる */
}
/* 子要素（div）は自動的にフレックスアイテムになる */
  • フレックスコンテナー display: flexを指定した親要素。子要素の配置方法を制御する
  • フレックスアイテム コンテナーの直接の子要素。自動的にFlexboxの影響を受ける
  • 親子関係が重要 コンテナーに指定したプロパティがアイテムの配置を決定する

使うと何が楽になるか

従来のfloatやinline-blockを使った配置と比べて、Flexboxは圧倒的にシンプルで直感的です。

従来の方法
記述が煩雑になりがち
構造が複雑
clearfixが必要
中央揃えが困難
余白調整が面倒
Flexbox
直感的な記述
シンプルな構造
自動で横並び
中央揃えが簡単
余白をgapで指定

実際にナビゲーションメニューを作って比較してみましょう。

従来の方法：複雑 
<nav class="nav-old">
    <a href="#">ホーム</a>
    <a href="#">概要</a>
    <a href="#">お問い合わせ</a>
</nav>
.nav-old {
    width: 100%;
    overflow: hidden;     /* floatした子要素を含める */
    text-align: center;   /* 中央揃えの準備 */
    font-size: 0;        /* inline-blockの隙間対策 */
}
.nav-old::after {
    content: "";
    display: table;
    clear: both;          /* clearfixが必要 */
}
.nav-old a {
    float: left;          /* 横並びにするため */
    padding: 8px 16px;
    margin-right: 12px;   /* 余白を手動調整 */
    text-decoration: none;
    font-size: 16px;     /* font-size:0を打ち消し */
    /* 中央揃えは複雑な計算が必要... */
}
Flexboxの方法：シンプル 
<nav class="nav-flex">
    <a href="#">ホーム</a>
    <a href="#">概要</a>
    <a href="#">お問い合わせ</a>
</nav>
.nav-flex {
    display: flex;        /* この1行だけで横並び完了！ */
    gap: 12px;           /* 要素間の余白も簡単 */
    justify-content: center; /* 中央揃えも1行 */
}
.nav-flex a {
    padding: 8px 16px;
    text-decoration: none;
    /* floatやclearfixは不要 */
}

実際に試してみよう

試せるプロパティ
  • display: flex コンテナーをFlexboxにする
  • gap アイテム間の余白（例：8px、16px、24px）
  • justify-content 水平方向の配置（center、space-between、flex-start、flex-end）
CSSコード:
プレビュー:
男子生徒のアイコン

実際にコードを見ると、こんなに違いが出るんですね！

AI先生のアイコン

そうなんだ。親要素にdisplay: flexを指定するだけで、子要素が自動的に横並びになる。さらに中央揃えや余白調整も親要素で一括で指定できて直感的に書けるから、レイアウトの実装速度が劇的に上がるよ。

フレックスコンテナーとアイテムの関係

Flexboxを理解するには、コンテナー（親要素）とアイテム（子要素）の役割分担を把握することが重要です。それぞれに指定できるプロパティが異なり、どちらに何を指定するかで効果が決まります。

コンテナーに指定する基本（display: flex）

フレックスコンテナーには、子要素全体の配置を制御するプロパティを指定します。

.container {
    display: flex;           /* Flexboxを有効化 */
    justify-content: center; /* 水平方向の揃え */
    align-items: center;     /* 垂直方向の揃え */
    gap: 16px;              /* アイテム間の余白 */
    flex-direction: row;     /* 並び方向（横並び） */
}
コンテナーのプロパティで全体を制御
親要素に指定するプロパティが子要素全体の配置を決定
justify-content
主軸方向（通常は水平）の配置制御
center
space-between
align-items
交差軸方向（通常は垂直）の配置制御
center
flex-start
flex-direction
並び方向の制御
row（横並び）
column（縦並び）
gap
アイテム間の余白制御
gap: 4px
gap: 16px

主要なコンテナープロパティまとめ

  • display: flex Flexboxを有効化する最も重要なプロパティ
  • justify-content 主軸方向（通常は水平）の配置を制御
    center: 中央揃え
    space-between: 両端揃え
    flex-start: 左揃え
    flex-end: 右揃えなど
  • align-items 交差軸方向（通常は垂直）の配置を制御
    center: 中央揃え
    flex-start: 上揃え
    flex-end: 下揃えなど
  • flex-direction アイテムの並び方向を指定
    row: 横並び（デフォルト）
    column: 縦並び
  • gap アイテム間の余白を一括で指定（例：8px、16px、24px）

実際に試してみよう

CSSコード:
プレビュー:

アイテムに影響する基本的な性質

フレックスアイテムは、コンテナーに display: flex が指定されると自動的に特別な性質を持ちます。

.container {
    display: flex;  /* 親要素にdisplay: flexを指定すると... */
}

/* 子要素（アイテム）は自動的に以下の性質を持つ */
.item {
    /* 幅が自動調整される（自動伸縮） */
    /* 高さが他のアイテムと揃う（高さ統一） */
    /* 内容に応じた最小幅が保持される */
    /* 個別プロパティで細かく制御可能 */
}
  • 自動伸縮 利用可能な空間に応じて幅が自動調整される
  • 高さ統一 同じ行のアイテムは自動的に高さが揃う
  • 最小幅保持 内容に応じた最小幅は自動的に確保される
  • 個別制御 各アイテムに個別のプロパティで細かく調整可能

アイテムの個別制御

アイテムごとに以下のようなプロパティを指定して、個別に挙動を調整できます。

通常のブロック要素では実現が困難な、比率による幅制御、個別の垂直位置調整、表示順序の変更が、シンプルなプロパティ指定だけで実現できることがFlexboxの大きな特徴です。

アイテムに個別プロパティを指定
flex: アイテムの幅比率を制御
アイテム1
flex: 1
アイテム2
flex: 3（3倍の幅）
アイテム3
flex: 1
align-self: アイテム個別の垂直位置を制御
アイテム1
align-self: flex-start
アイテム2
align-self: center
アイテム3
align-self: flex-end
order: 表示順序を変更（HTML順序とは無関係）
HTMLで2番目
order: 1（1番目に表示）
HTMLで3番目
order: 2（2番目に表示）
HTMLで1番目
order: 3（3番目に表示）

アイテムに指定できる主要プロパティ

フレックスアイテムには、個別の動作を制御するための専用プロパティがあります。

  • flex アイテムの伸縮比率を指定。flex: 1で均等分割、flex: 2で2倍の幅になる
  • align-self そのアイテムだけの垂直位置を個別に制御。コンテナーのalign-itemsを上書き
    flex-start（上揃え）
    center（中央揃え）
    flex-end（下揃え）
  • order 表示順序を数値で指定。HTML構造を変えずに並び順だけを変更可能
  • flex-grow 余った空間をどの程度伸びるかの比率。1で均等に伸びる
  • flex-shrink 空間が足りない時にどの程度縮むかの比率。0で縮まない、1で縮む
  • flex-basis アイテムの基本サイズを指定（例：100px、30%、autoなど）

実際に試してみよう

<div class="container">
    <div class="item item1">アイテム1</div>
    <div class="item item2">アイテム2</div>
    <div class="item item3">アイテム3</div>
</div>
CSSコード:
プレビュー:
女子生徒のアイコン

コンテナーとアイテムで役割が分かれているんですね。どちらに何を指定すればいいか迷いそうです。

AI先生のアイコン

基本的な考え方は簡単だよ。「全体をどう配置するか」はコンテナーで、「個別のアイテムをどうするか」はアイテムで指定する。まずはコンテナーの基本プロパティから覚えていこう。

主軸と交差軸を理解しよう

男子生徒のアイコン

display: flexって、要素が横に並ぶだけでしょ？なんで「主軸」とか「交差軸」なんて言葉を使うの？

AI先生のアイコン

いい質問だね！一見すると横並びに見えるけど、実は「縦に並べる」こともできるんだ。Flexboxではどの方向に並べるかを決めるために「主軸」と「交差軸」という考え方が必要になる。

女子生徒のアイコン

方向が変わるってことは、配置のプロパティも使い分ける必要があるってことですか？

AI先生のアイコン

その通り！主軸は「要素が並ぶ方向」、交差軸は「それに垂直な方向」のこと。例えば横並び（row）なら主軸が左右で交差軸が上下になる。この軸を理解すれば、justify-contentとalign-itemsのどちらを使えばいいか迷わなくなるよ。

主軸（main axis）

主軸は、フレックスアイテムが並ぶメインの方向を表します。flex-directionプロパティの値によって決まります。

flex-directionで主軸の方向が決まる
主軸は要素が並ぶメインの方向
flex-direction: row
主軸 = 水平方向（左→右）
主軸
1
2
3
flex-direction: column
主軸 = 垂直方向（上→下）
主軸
1
2
3

flex-directionの値

  • row（デフォルト） 主軸は水平方向。アイテムは左から右に並ぶ
  • column 主軸は垂直方向。アイテムは上から下に並ぶ
justify-contentについて

justify-contentは主軸方向の配置を決めるプロパティです。横並び（row）なら水平方向、縦並び（column）なら垂直方向の配置を指定することを覚えておきましょう。

交差軸（cross axis）

交差軸は、主軸に対して垂直な方向です。主軸が決まれば、交差軸は自動的に決まります。

AI先生のアイコン

交差軸は、主軸に対して垂直な方向のことです。例えば、主軸が row（横並び）の場合は交差軸が上下（）の方向になります。逆に主軸が column（縦並び）の場合は交差軸が左右（）の方向になります。

主軸に垂直な方向が交差軸
交差軸はalign-itemsで配置を決める
rowの時の交差軸
交差軸 = 垂直方向（上↕下）
主軸
交差軸
A
B
C
columnの時の交差軸
交差軸 = 水平方向（左↔右）
主軸
交差軸
A
B
C

flex-directionの値

  • row 交差軸は垂直方向（上から下）。要素の垂直配置
  • column 交差軸は水平方向（左から右）。要素の水平配置
align-itemsについて

align-itemsは交差軸方向の配置を決めるプロパティです。横並び（row）なら垂直方向、縦並び（column）なら水平方向の配置を指定します。

動作を確認しよう

flex-directionプロパティを変更することで、主軸と交差軸を切り替えることができます。これにより、同じ配置プロパティでも異なる効果を得られます。

以下のように、プロパティの値を変更して動作を確認してみましょう。

  • flex-direction: row に設定し、justify-content: center と align-items: center を適用。アイテムが中央に配置されることを確認
  • flex-direction: column に変更し、同じ justify-content: center と align-items: center を適用。アイテムが縦方向に中央に配置されることを確認
  • flex-direction: row に戻し、justify-content: flex-end と align-items: flex-start を適用。アイテムが右上に配置されることを確認
  • flex-direction: column に変更し、同じ justify-content: flex-end と align-items: flex-start を適用。アイテムが下左に配置されることを確認
CSSコード:
プレビュー:
女子生徒のアイコン

なるほど！同じjustify-content: centerでも、flex-directionが変わると配置の意味が変わるんですね。

AI先生のアイコン

その通り！さらに交差軸も見てみよう。rowの場合はalign-items: flex-endで縦方向の下揃え、columnの場合はalign-items: flex-startで横方向の左揃えになる。主軸が変われば交差軸も変わるから、同じプロパティでも効果が変わるんだ。

男子生徒のアイコン

つまり、flex-directionで主軸を決めたら、justify-contentは主軸方向、align-itemsは交差軸方向の配置になるってことですね！

AI先生のアイコン

完璧だよ！この軸の概念さえ理解すれば、Flexboxで迷うことはなくなる。主軸と交差軸を意識して使い分けよう。

理解度チェッククイズ

AI先生のアイコン

それじゃあ、Flexboxの基本をちゃんと理解できたか確認してみよう。全6問のクイズに挑戦してみてね！

Flexboxミニクイズ

フレックスコンテナーを作成するために、親要素に指定するCSSプロパティと値の組み合わせはどれですか？
display: block;
display: inline;
display: flex;
flex-container: true;
Flexboxでアイテム間の余白を一括で指定するためのプロパティはどれですか？
.container {
  display: flex;
  ①: 16px;
  justify-content: center;
}
margin
padding
gap
spacing
Flexboxにおける「主軸」の説明として正しいものはどれですか？
常に垂直方向（上下）を指す
常に水平方向（左右）を指す
flex-directionの値によって変わる、アイテムが並ぶメインの方向
交差軸と同じ意味である
次のコードで、アイテムは横方向（水平）にどのように配置されますか？
.container {
  display: flex;
  justify-content: space-between;
}
中央に寄せて配置される
左端に寄せて配置される
両端に配置され、間隔が均等に配分される
右端に寄せて配置される
次のコードで、item2の幅は他のアイテムと比べてどうなりますか？
.item {
  flex: 1;
}
.item2 {
  flex: 3;
}
他のアイテムと同じ幅になる
他のアイテムの2倍の幅になる
他のアイテムの3倍の幅になる
他のアイテムの1/3の幅になる
flex-direction: column; を指定した時、交差軸の方向はどうなりますか？
垂直方向（上下）
水平方向（左右）
斜め方向
交差軸は存在しなくなる

まとめ

女子生徒のアイコン

Flexboxの仕組みがよく分かりました！特に主軸と交差軸の概念を理解すると、プロパティの使い分けが明確になりますね。

男子生徒のアイコン

実際のコード例を見ながら学べたので、どんな時にどのプロパティを使えばいいかイメージできるようになりました。

AI先生のアイコン

そうだね。Flexboxは、コンテナーとアイテム、主軸と交差軸という基本概念を理解すれば、レイアウト作成がずっと楽になる。これからはfloatのような複雑な調整は不要だよ。次回は、より実践的な配置テクニックを学んでいこう。

Flexbox活用のポイント
  • display: flex 親要素に指定するだけで子要素が横並びに。これがFlexboxの第一歩
  • 主軸と交差軸 flex-directionで主軸の方向が決まり、交差軸は主軸に垂直な方向。この理解が重要
  • justify-content 主軸方向の配置を制御。center、space-between、flex-endなど用途に応じて選択
  • align-items 交差軸方向の配置を制御。要素の垂直位置調整に使用
  • gap アイテム間の余白を簡単に指定。marginの個別調整が不要に
  • flexプロパティ アイテムの幅比率を指定。flex: 1で均等分割、flex: 2で2倍の幅

次回は、Flexboxの応用的な配置テクニックと、実際のWebサイトでよく使われるレイアウトパターンを学びます。

学習チェック

このレッスンを理解できたら「完了」をクリックしてください。
後で見直したい場合は「未完了に戻す」で進捗をリセットできます。

前のレッスン
2.1 モダンレイアウトの世界へようこそ
noteで応援
次のレッスン
2.3 Flexboxの主要プロパティを使いこなそう

レッスン完了！🎉

お疲れさまでした！