初心者必見！Flexboxの使い方をお弁当箱で直感理解

Webサイトを作るとき、「要素を横並びにしたい」「中央に寄せたい」「隙間をあけたい」と思ったことはありませんか？
そんなときに便利なのが Flexbox です。この記事では、Flexboxの基本的な使い方を「お弁当箱」に例えて、初心者でも直感的に理解できるように解説します。横並び・中央寄せ・隙間調整など、実際のコード例と一緒に学んで、CSSレイアウトの基礎をマスターしましょう。

前回のおさらい

前回の記事もチェック！
➡ divってなに？HTMLの”見えない箱”を優しく解説！

前回は、お弁当箱（要素div）の中におかず（子要素div）を入れることで、グループにしてまとめてデザインしたりしましたね。　　前回の記事→divってなに？HTMLの”見えない箱”を優しく解説！
今回は、そのおかずたちの並べ方、位置の調整方法について、flexboxを使ってもっと詳しくみていきましょう！

Flexboxとは？初心者でもわかる基本ルール

Flexbox（Flexible Box Layout）は、要素を柔軟に並べて配置できるCSSのレイアウト機能です。
「お弁当箱（親要素）」の中に「おかず（子要素）」を入れて整列させるイメージを持つと、直感的に理解しやすくなります。

Flexboxの使い方をお弁当箱で解説

このようにお弁当の中のご飯とおかずが縦に並んでいます

See the Pen 縦並び by VA-Rie (@VA-Rie) on CodePen.

display : flexとは（ ディスプレイフレックス）

横並びにする（display:flex）

display:flexを使うだけで、縦並びから横並びになります。

See the Pen 横並び by VA-Rie (@VA-Rie) on CodePen.

要素を右寄せにする（justify-content: flex-end）

「お弁当箱のおかずを右に寄せる」イメージです。

See the Pen 右寄せ by VA-Rie (@VA-Rie) on CodePen.

要素を均等配置する（justify-content: space-between）

左右におかずを広げて置くように、要素同士を均等に配置できます。

See the Pen 均等に配置 by VA-Rie (@VA-Rie) on CodePen.

要素を中央に揃える（justify-content: center）

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

要素の間に隙間をつける（gap）

Flexboxでは margin を使わなくても gap で簡単に隙間を作れます。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

Flexboxでできることまとめ

• Flexboxを使えば、お弁当箱の中身のように要素を自由に並べられる
• 横並び・中央寄せ・均等配置・隙間調整がシンプルなコードで実現可能
• 初心者がCSSレイアウトを学ぶ第一歩に最適

👉 次に読むと理解が深まります！
➡ CSSの基本！marginとpaddingの違いをお弁当で解説