TOP CSSでできる CSSでレイアウトを自由に！Flexboxの基本と使い方

CSSでレイアウトを自由に！Flexboxの基本と使い方

2025.10.09

CSSでできる web制作の基本

はじめに

こんにちは、Aoshiです。
前回はCSSで文字や画像の見た目を整えるところまで進めました。

自分も最初のころ、「画像とテキストを横に並べたいのに、なんかズレる…」と何度も試行錯誤してました。
margin や padding を動かしても「うーん、違うなあ」って感じで。

そんな時に出会ったのが Flexbox（フレックスボックス）。
初めて使ったとき、「え、こんなに簡単なの！？」って本気でびっくりしました。
今回は、そのFlexboxの基本を、実際のコードを見ながら一緒に理解していきましょう。

Flexboxとは？

Flexboxは、中の要素（子要素）を自由に並べるためのCSSの仕組みです。
昔は float や margin で微調整していたんですが、
Flexboxならわずか数行でスッキリ整います。

基本の書き方

Flexboxを使うには、まず「親要素」に display: flex; を書きます。
これだけで、中の要素が横に並びます。

display: flex; は「Flexboxを使うモードにする」命令です。

↓

これを親要素に付けると、子要素が自動的に整列します。

外側（親）は「flexコンテナ」、中のボックスは「flexアイテム」と呼ばれます。
名前を覚えておくと、後で他の記事を読むときにも役立ちますよ。

よく使う3つのプロパティ

Flexboxにはいろいろな設定がありますが、
最初に覚えるならこの3つを押さえればOKです👇

この3つを組み合わせるだけで、ほとんどのレイアウトが作れます。
「ここだけ最初に覚える」と考えると気が楽ですよ。

中央に配置してみよう

では、画面の中央に要素を置いてみましょう。
これ、昔はかなり苦労した人も多いはずです。

ここでの命令の意味を整理します👇

• justify-content: center; → 横方向の中央に寄せる
• align-items: center; → 縦方向の中央に寄せる
• height: 300px; → 高さを設定（高さがないと中央に寄らない）
• background-color: #f0f0f0; → 背景を付けて見やすく

これでグレーの枠の中央に、青いボックスがピタッと収まります。
昔は margin: auto; をいじっても位置が合わなくて泣きそうでしたが、
Flexboxだとほんの数行で解決です。

横並び＋等間隔

次は、複数のボックスをバランスよく並べてみましょう。

justify-content: space-between; は、
「両端に余白を作って、残りのスペースを均等に空ける」命令です。
これで3つのボックスが気持ちよく整列します。

ナビゲーションメニューやボタン配置に使うときれいに仕上がります。

縦に並べてみよう

Flexboxは横並びだけじゃなく、縦方向にも対応しています。

flex-direction: column; → 横並び（row）を縦に変更

• gap: 10px; → 要素同士のすき間を自動で作る

margin を1つずつ設定しなくても、自然に整うのが嬉しいところ。
この「gap」プロパティ、地味に使いやすいです。

まとめ

Flexboxを使うと、レイアウトの自由度が一気に上がります。
「並べる」「揃える」「中央に置く」など、よく使う操作を短いコードで完結できます。

覚えておきたいポイントはこの3つ👇

1. 親要素に display: flex; を指定
2. 横方向は justify-content
3. 縦方向は align-items

margin で苦戦していた配置も、Flexboxを使えばあっという間に整います。
慣れてくると、「これがあればCSSでできないレイアウトなんてないかも？」と思うくらい便利です。もしまだFlexboxを触ったことがない人は、ぜひ小さな練習ページで試してみてください！書いて動かすうちに、CSSの世界が一気に広がるはずです！

＼この記事をシェアする／

リンクをコピー