Webサイトを作るとき、「要素を横並びにしたい」「中央に寄せたい」「隙間をあけたい」と思ったことはありませんか？
そんなときに便利なのが Flexbox です。この記事では、Flexboxの基本的な使い方を「お弁当箱」に例えて、初心者でも直感的に理解できるように解説します。横並び・中央寄せ・隙間調整など、実際のコード例と一緒に学んで、CSSレイアウトの基礎をマスターしましょう。
前回のおさらい
前回は、お弁当箱（要素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のpadding（パディング）とは？内側の余白でデザインと読みやすさが変わる！」
Comments