Flexboxを感覚で理解する！視覚的コーディング練習法

Posted on by

〜理屈より“感覚”でレイアウトをつかむ〜

はじめに：Flexboxが難しい理由は「理屈で覚えようとする」から

CSSでレイアウトを組むとき、
最初の壁になるのが Flexbox（フレックスボックス）。

「justify-content」「align-items」「flex-direction」など、
英単語が多くて覚えにくい。
教科書どおりに読んでも、「結局どんな動きをするのか」がわかりづらい。

そんな経験、ありませんか？

でも実は、Flexboxは“頭で覚える”より“目で理解する”ほうが早い。
視覚的に配置を変えながら「こうするとこう動く」と体感することで、
驚くほどスッと理解できるようになります。

この記事では、「理屈ではなく感覚で理解する」ためのFlexbox練習法を紹介します。

Flexboxを“言葉”ではなく“イメージ”で捉えよう

Flexboxの目的は、「親要素の中で子要素（アイテム）を柔軟に並べる」ことです。

しかし、多くの人が最初につまずくのは、“方向”と“揃え方”の関係性です。

覚えるべきキーワードはたった3つ

概念英語プロパティ意味
主軸（メイン軸）flex-direction並べる向きを決める
主軸での揃え方justify-content左右（または上下）の位置を揃える
交差軸での揃え方align-items主軸と直角方向の位置を揃える

つまり、Flexboxとは——

「並べる方向を決めて、その方向と垂直方向を調整する仕組み」

これを“文字”で理解しようとすると難しい。
でも“動き”で見れば一瞬です。

まずは「Flexbox Playground」で“動きを観察”する

コードを書く前に、まずFlexbox Playground（視覚シミュレーター）を使いましょう。

以下のような無料ツールがあります

これらを使うと、スライダーを動かすだけでレイアウトが変わります。

たとえば

  • flex-direction: row → 横並び
  • flex-direction: column → 縦並び
  • justify-content: space-between → 両端揃え
  • align-items: center → 垂直方向中央揃え

“動く箱”を見るだけで、言葉で説明されるよりずっと早く理解できます。

「感覚で覚える」ための練習ステップ

次は、実際に自分の手で触りながら“体で覚える”練習です。
以下の順でステップアップしてみましょう

ステップ①：並び順を操る — flex-direction

まずは方向感覚をつかむことが最優先です。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.container {
  display: flex;
  flex-direction: row;
}

上のコードをブラウザで見て、row → row-reverse → column → column-reverse
と順に変えてみてください。

数字がどう並び替わるかを“目”で確認することで、「主軸の方向とは何か？」が自然に分かります。

💡 ポイント：方向が変わると、“justify”と“align”の意味も入れ替わる！

ステップ②：余白を操る — justify-content

次に、配置と余白のバランスを体感します。

.container {
  display: flex;
  justify-content: space-between;
}

これを以下のように切り替えて動きを見てください

プロパティ動きのイメージ
flex-start左寄せ（初期値）
flex-end右寄せ
center中央寄せ
space-between両端に配置・均等余白
space-around両端にも余白あり
space-evenly完全に等間隔

これを視覚的に試すと、「中央寄せはこの動き」という感覚が自然に身につきます。

ステップ③：高さを整える — align-items

次に、縦方向の揃え方を確認します。

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

このとき、各ボックスの高さを変えてみると、align-items の挙動がより直感的にわかります

値動きのイメージ
flex-start上に寄せる
flex-end下に寄せる
center真ん中に寄せる
stretch高さをそろえる

Flexboxは縦の中央揃えが圧倒的に簡単なのが魅力です。

ステップ④：一部だけ動かす — align-self

Flexboxの面白いところは、
「全体を揃えつつ、特定の要素だけ別の揃え方にできる」こと。

.container div:nth-child(2) {
  align-self: flex-end;
}

こうすると、2番目の要素だけ下に移動します。
「例外を許す柔軟さ」＝Flex（柔軟）という名前の由来が、ここにあります。

ステップ⑤：大きさを調整する — flex-grow, flex-shrink, flex-basis

最後に、要素のサイズのバランスを調整する3兄弟。

プロパティ役割イメージ
flex-growどれだけ伸びるか“スペースの取り合い”
flex-shrinkどれだけ縮むか“押し合い”
flex-basis基本サイズ“スタート時の大きさ”

初心者は「覚える」より「触って違いを体験」するのがベスト。

例

.container div:nth-child(1) { flex-grow: 2; }
.container div:nth-child(2) { flex-grow: 1; }

→ 「1番目の箱が2倍の大きさになる」
これを実際に見て、感覚で理解するのが一番早いです。

第4章：練習を“ゲーム化”して覚える方法

学習は「退屈」だと続きません。
そこでおすすめなのが、Flexboxをゲームで学ぶ方法。

以下のサイトはすべて無料で楽しめます👇

🐸 ① Flexbox Froggy

カエルを池の葉っぱに動かすゲーム形式。
レベルごとにプロパティを学べて、視覚的にも超わかりやすい！

🧱 ② Flexbox Defense

タワーディフェンス風に、要素を配置して敵を止める。
Flexboxの位置指定を“反射的に”覚えられます。

🎮 ③ Flexbox Zombies

ゾンビを避けながらレイアウトを完成させる英語ゲーム。
ストーリー仕立てで“動きの感覚”が自然に身につく！

第5章：Flexboxを使いこなす実践トレーニング

理解できたら、次は「実務で使う」練習。
以下の課題をこなすことで、Flexboxの感覚が定着します

練習1：ナビゲーションバーを作る

要素を横並びにして、左右中央に配置する練習。

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

練習2：カードレイアウトを作る

カードを均等に並べる。
flex-wrapで折り返しもできるように。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

練習3：縦中央配置を作る

よくある「中央寄せコンテンツ」はFlexboxが最強。

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

1行で縦横中央が完了。
昔のposition: absolute;やtransform時代とは雲泥の差です。

Flexboxを“体で覚える”3つの習慣

Flexboxは理論より「習慣化」することが大切です。
以下の3つを意識して練習しましょう

① コピペせず、自分の手で打つ

キーボードで入力することで、記憶が定着します。
ミスも学習に変わる。

② 動きを毎回確認する

ブラウザで「変化」を観察。
“見て→触って→確かめる”を繰り返すことが理解の近道です。

③ デザイン模写にFlexboxを使ってみる

Webサイトを見ながら「この配置、Flexboxで組める？」と考えてみましょう。
模写トレーニングが最高の復習になります。

まとめ：Flexboxは「見て覚える」スキル

Flexboxは公式リファレンスを読むだけでは理解できません。
実際に動きを見て、“感覚”で覚えるのが最速です。

  • 動かして「方向と揃え方」を体感
  • ゲームで「動き」を習慣化
  • 実践で「配置パターン」をストック

この3ステップを繰り返すだけで、
Flexboxは自然と“手が覚える”スキルになります。

理屈より感覚。
それが、Flexboxをマスターする最短ルートです。