Flexboxがわからない…を卒業！仕組みからスッキリ理解する入門ガイド

「Flexboxがよくわからない」「思った通りに揃わない」「centerが効かない…」
そんな経験、ありませんか？

CSSレイアウトの中でも、Flexbox（フレックスボックス）は便利だけど混乱しやすい分野。
しかし、一度“軸”と“親子関係”の考え方を掴むと、驚くほどスッキリ理解できます。
この記事では、Flexboxを「感覚的にわかる」レベルまで丁寧に解説します。

Flexboxは「親がルールを決めて、子が従う」

Flexboxの基本は、親要素がルールを決めるという考え方です。
display: flex; を指定するのは、親コンテナ。
そして、その中にある子要素（アイテム）が並び方の影響を受けます。

<div class="parent">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.parent {
  display: flex;
}

これだけで、子要素が横並びになります。
「横に並べたいときは親に display: flex;」というルールをまず覚えましょう。

Flexboxを理解するカギは「2本の軸」

Flexboxには、2つの軸があります。
これを理解すれば、配置も余白も迷いません。

軸の種類	意味	操作するプロパティ
メイン軸 (main axis)	子要素が並ぶ方向	`justify-content`
交差軸 (cross axis)	それに直交する方向（上下）	`align-items`

軸の向きは、flex-direction で自由に切り替え可能です。

.parent {
  flex-direction: row; /* 横並び（左→右） */
  /* flex-direction: column; 縦並び（上→下） */
}

よく使うFlexboxプロパティ3選

　① 並び方向を決める：flex-direction

.parent {
  flex-direction: row; /* 横並び（初期値） */
}

row：左から右へ（デフォルト）
row-reverse：右から左へ
column：上から下へ
column-reverse：下から上へ

👉 「縦並びにしたいときは column！」という直感でOK。

　② 横方向の揃え方：justify-content

メイン軸（並ぶ方向）での位置・余白を整えます。

.parent {
  justify-content: space-between;
}

代表的な値：

値	意味
`flex-start`	左寄せ（初期値）
`center`	中央寄せ
`flex-end`	右寄せ
`space-between`	両端揃え＋中の間を均等
`space-around`	要素の周囲に均等余白
`space-evenly`	全ての間隔を完全均等に

👉 ナビゲーションメニューやボタン配置で大活躍。

flex-start：左に詰めて配置（デフォルト設定）

center：要素全体を中央寄せ

flex-end：右端に寄せて配置

space-between：最初と最後の要素を両端に、間を均等に分配

space-around：各要素の“まわり”に均等な余白（間隔が少し広く見える）

space-evenly：すべての隙間・端の余白を完全に均等に

　③ 縦方向の揃え方：align-items

交差軸（上下方向）の揃えを指定します。

.parent {
  align-items: center;
}

代表的な値：

値	意味
`stretch`	高さを揃える（初期値）
`flex-start`	上揃え
`center`	中央揃え
`flex-end`	下揃え

👉 高さの違うボックスを横並びにしても、見た目をきれいに整えられます。

設定されていく過程

上から一つずつ書いていくと、このような変化で設定されていきます。

display: flex;

justify-content: center;

align-items: center;

実践：カードレイアウトに使ってみよう

Flexboxは、カードやナビメニューで力を発揮します。

<div class="card-list">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

.card-list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.card {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

これでカードが等間隔で横に並び、高さも自動で揃うようになります。
gapを使えば、margin地獄からも解放！

子要素側で知っておくと便利なプロパティ

　flex：伸び縮みをコントロール

.item {
  flex: 1; /* 余ったスペースを均等に分配 */
}

flexは flex-grow flex-shrink flex-basis の省略形ですが、
「flex: 1; ＝等分に伸びる」で十分使えます。

　align-self：1つだけ位置を変える

.item.special {
  align-self: center;
}

全体の揃え方を変えずに、特定の1要素だけ縦位置を変えたいときに便利です。

align-self は Flexboxで「1つの子要素だけ」位置を変えたいときに使う特別なプロパティ です。
全体の揃え方 (align-items) はそのままに、個別に「こいつだけ別ポジション！」と指定できるんです。

こちらのページでデモを試せます⇒参照元：mdn

　order：並び順を入れ替える

.item:nth-child(2) {
  order: 3;
}

HTMLの順番はそのまま、見た目だけ入れ替えることができます。
レスポンシブ対応などでも活躍。

orderの基本ルール

値	意味
0（初期値）	何も指定しない場合の順番
数値が小さいほど前に来る	`order: 1` → `order: 2` の順で並ぶ
同じ値ならHTMLの順	同順位なら、記述順どおり

ここが大事

order で変わるのは見た目だけ。
HTML上の構造は変わらないので、例えば

スクリーンリーダーで読む順番
フォーカス移動の順番（Tabキー）
検索エンジンが読む構造

これらは元のHTMLの順番のままです。

つまり、order は「UIを整える最終手段」として使うもので、構造を変える目的には使わない方が安全です。

✅ 見た目上の順番だけ変える

✅ HTMLの構造はそのまま

✅ レスポンシブ対応や一時的な順番変更に最適

⚠️ アクセシビリティ上の配慮も忘れずに（読み上げ順は変わらない）

Flexboxでよくある「なぜ？」を解決！

　Q. centerが効かない…

A. Flexboxは軸で動く仕組みです。
横並びなら justify-content、縦方向なら align-items を使います。
どの軸の中央にしたいかを意識すると解決します。

　Q. display:flex; を子に書いても効かない…

A. Flexは「親→子の関係」で成立します。
display:flex; は常に親要素に指定し、子がその影響を受けると覚えましょう。

　Q. GridとFlex、どう使い分けるの？

A. 簡単に言うと：

比較	Flexbox	Grid
得意分野	1列（横or縦）での整列	行×列の複雑レイアウト
主な用途	ナビ、ボタン、カード一覧	ページ全体やギャラリー
思考	「並べ方」中心	「配置構造」中心