※ この記事にはアフィリエイトリンクが含まれます
Web制作の現場では、「要素を横に並べたい」「上下左右に中央揃えしたい」といった場面がよくあります。
こうしたレイアウトを、少ないコードで柔軟に実現できるのが Flexbox（フレックスボックス） です。
一昔前までは、float や position を組み合わせてレイアウトを組んでいましたが、今ではFlexboxを使うことで、よりシンプルかつ直感的に配置をコントロールできるようになりました。
本記事では、CSSでレイアウトを整える際によく使われる「display: flex」について、基礎から丁寧に解説していきます。
この記事では以下のような内容を扱います。
- Flexboxの基本的な考え方と仕組み
- 親要素・子要素に指定する主なプロパティ
- よくあるレイアウトパターンとその実装例
- Flexboxを使う上での注意点やGridとの違い
「名前は聞いたことがあるけど、実はよくわかっていない」
そんな方でも安心して読んでいただけるよう、わかりやすく丁寧に進めていきますので、ぜひ最後までお付き合いください。
Flexboxの基本
まずは、Flexboxの基本的な使い方について見ていきましょう。
Flexboxを使うための第一歩は、親要素に display: flex; を指定することです。
display: flex とは？
display: flex; は、HTMLの要素に「フレックスコンテナ」という役割を持たせます。この指定をすると、その子要素（中身の要素）たちが柔軟に配置されるようになるのが特徴です。
.container {
display: flex;
}上記のようにCSSで .container に display: flex; を指定するだけで、子要素は横並びになります。これがFlexboxの大きな特徴の一つです。
親子関係が重要
Flexboxは、親要素（フレックスコンテナ）と子要素（フレックスアイテム）の関係性が前提となっています。
設定するプロパティも、「親要素に指定するもの」と「子要素に指定するもの」で役割が異なります。
| 役割 | 主な指定先 | 目的 |
|---|---|---|
| フレックスコンテナ（親） | display: flex を指定する要素 | 子要素の並び方や配置を制御 |
| フレックスアイテム（子） | 親要素の直下の要素 | 自身のサイズや順序を調整 |
このように、「誰に何を指定するか？」を理解することがFlexboxを使いこなすコツです。
ブロック要素にも、インライン要素にも使える
Flexboxは、ブロック要素（divなど）にもインライン要素（spanなど）にも使うことができます。
特にブロック要素を横並びにしたいときや、縦・横中央に配置したいときには非常に便利です。
このように、display: flex は非常にシンプルな記述でありながら、レイアウトを柔軟に制御できる優れた機能です。
次章では、Flexboxでよく使われる親要素側のプロパティについて、詳しく見ていきましょう。
Flexboxのよく使うプロパティまとめ
Flexboxでは、親要素（フレックスコンテナ）にいくつかのプロパティを指定することで、子要素の並び方や配置を細かくコントロールできます。
ここでは、実務でもよく使われる代表的なプロパティをご紹介します。
flex-direction（並ぶ方向を決める）
.container {
flex-direction: row; /* デフォルト */
}子要素をどの方向に並べるかを指定します。
| 値 | 説明 |
|---|---|
row | 横方向に並ぶ（左→右） |
row-reverse | 横方向に並ぶ（右→左） |
column | 縦方向に並ぶ（上→下） |
column-reverse | 縦方向に並ぶ（下→上） |
justify-content（主軸方向での配置）
.container {
justify-content: center;
}子要素を横方向（デフォルトの主軸）でどう並べるかを指定します。
| 値 | 説明 |
|---|---|
flex-start | 左寄せ（デフォルト） |
flex-end | 右寄せ |
center | 中央寄せ |
space-between | 両端に配置し、間隔を均等に |
space-around | 子要素の両側に均等な余白をつける |
space-evenly | 子要素間の余白を均等に揃える（おすすめ） |
align-items（縦方向での揃え方）
.container {
align-items: center;
}子要素を縦方向でどう揃えるかを指定します。
| 値 | 説明 |
|---|---|
stretch | 高さを親要素に合わせて広げる（デフォルト） |
flex-start | 上揃え |
flex-end | 下揃え |
center | 縦方向の中央に揃える |
baseline | テキストのベースラインに揃える |
flex-wrap（折り返しの有無）
.container {
flex-wrap: wrap;
}要素がはみ出したときに折り返すかどうかを指定します。
| 値 | 説明 |
|---|---|
nowrap | 折り返さない（デフォルト） |
wrap | 下に折り返す |
wrap-reverse | 上に折り返す |
gap（要素間のスペース）
.container {
gap: 16px;
}子要素の余白を指定できます。
以前は margin で調整していましたが、今は gap がとても便利です。
以上が、Flexboxの親要素によく使われる主なプロパティです。
この組み合わせを理解することで、ほとんどのレイアウトはスムーズに組めるようになります！
Flexboxの注意点
Flexboxはとても便利なレイアウト手法ですが、実際に使ってみると「思った通りに動かない…」と感じる場面もあるかもしれません。
ここでは、Flexboxを使う際に知っておくと安心な注意点をいくつかご紹介します。
古いブラウザでは挙動が異なることがある
現在主流のモダンブラウザ（Chrome・Firefox・Edge・Safariなど）では display: flex に対応していますが、古いバージョンのInternet Explorer（IE11など）では一部のプロパティが正しく動作しないことがあります。
特に gap プロパティは、IEではサポートされていません。
そのため、古い環境をサポートする必要がある場合は、互換性に注意しましょう。
marginとの組み合わせで意図しない余白が出ることがある
Flexboxでは、justify-content: space-between と margin を同時に使うと、余白が広がりすぎることがあります。
このようなケースでは、gap を使うか、margin の指定を調整する必要があります。
/* 意図しない余白の原因になりやすい例 */
.item {
margin-right: 20px;
}flex-grow でサイズが不均一になることがある
flex-grow を使うと、空きスペースに応じて要素が伸びますが、内容量の違う要素同士だとバランスが悪く見えることがあります。
見た目を揃えたい場合は、明示的に width を指定するのがオススメです。
効率的にCSSを学びたい方へ
CSSを使ってレイアウトやデザインの表現力を高めたい方には、動画学習サイトUdemyを活用してみましょう。基礎から応用まで体系的に学べる講座が揃っており、初心者でも無理なくステップアップが可能です。
もし「何から始めたらいいか迷っちゃうな…」という方には、
「Web開発入門完全攻略コース – HTML/CSS/JavaScript」 がおすすめです！
この講座は、プログラミングがはじめてでも大丈夫。CSSだけでなく、HTML・JavaScriptの基本をしっかり学びながら、自分でWebページを作れるようになります。楽しみながら“創れる人”を目指しましょう！
まとめ
今回は、CSSの「display: flex」を使ったレイアウト方法について、基礎から実践的な内容まで幅広く解説しました。
Flexboxは、
- 要素を簡単に横並びにできる
- 中央揃えなどのレイアウトが直感的にできる
- 親要素と子要素で柔軟な調整が可能
といったメリットがあり、現代のWeb制作には欠かせない技術のひとつです。
最初は慣れない用語や動きに戸惑うかもしれませんが、プロパティの役割や使い方をしっかり理解すれば、複雑なレイアウトも簡単に組めるようになります。
Flexboxを味方につけることで、コーディングの自由度と効率が大きく向上します。
ぜひ実際の制作の中で少しずつ試しながら、使い方を自分のものにしていってくださいね。
最後まで読んでいただき、ありがとうございました！
コメント