2026年4月16日
flexboxとは？なぜ必要なの？
flexbox（フレックスボックス）の使い方を知りたいですか？CSSでレイアウトを組むとき、「横並びにしたい」「中央に揃えたい」という場面はよくあります。
flexboxは、そういったレイアウトを簡単に実現できるCSSの機能です。正式名称は Flexible Box Layout（フレキシブル ボックス レイアウト） といいます。
この記事では、flexboxの基本的な使い方を初心者向けにわかりやすく解説します。コード例を見ながら、実際に手を動かして学んでいきましょう。
CSSの基本がまだ不安な人は「CSSとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。セレクタやプロパティの書き方がわかっていれば、flexboxの学習もスムーズです。
flexboxが登場する前は、横並びを作るのがとても大変でした。floatやinline-blockという古い方法を使う必要があり、バグも起きやすかったのです。flexboxのおかげで、レイアウトが格段に簡単になりました。今ではほぼすべてのブラウザがflexboxに対応しています。安心して使えます。
flexboxの基本：display: flex
flexboxを使うには、親要素に display: flex; を指定します。これだけで、子要素が横並びになります。
コード例：横並びにする
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>.container {\n display: flex; /* これだけで子要素が横並びになる */\n gap: 16px; /* 要素の間隔 */\n}\n\n.box {\n background-color: #0d9488;\n color: white;\n padding: 16px;\n border-radius: 8px;\n}▶ プレビュー
▶ プレビュー
▶ プレビュー
display: flex; を指定した要素を フレックスコンテナ、その中の子要素を フレックスアイテム と呼びます。
よく使うflexboxのプロパティ
justify-content：横方向の揃え方
justify-content は、フレックスアイテムを横方向にどう並べるかを指定します。
| 値 | 意味 |
|---|---|
flex-start | 左揃え（デフォルト） |
flex-end | 右揃え |
center | 中央揃え |
space-between | 両端に配置し、間隔を均等に |
space-around | 各要素の周りに均等な余白 |
.container {\n display: flex;\n justify-content: center; /* 中央揃え */\n}align-items：縦方向の揃え方
align-items は、フレックスアイテムを縦方向にどう揃えるかを指定します。
| 値 | 意味 |
|---|---|
stretch | 高さを揃えて引き伸ばす（デフォルト） |
flex-start | 上揃え |
flex-end | 下揃え |
center | 縦方向の中央揃え |
flex-wrap：折り返し
アイテムが多くなって横幅に収まらないとき、flex-wrap: wrap; を指定すると自動で折り返します。
.container {\n display: flex;\n flex-wrap: wrap; /* 収まらないときに折り返す */\n gap: 16px;\n}flex-direction：並ぶ方向
デフォルトは横並び（row）ですが、column を指定すると縦並びになります。
.container {\n display: flex;\n flex-direction: column; /* 縦並びにする */\n}🔗 あわせて擬似クラス完全解説もチェックしてみましょう。
flex-grow・flex-shrink・flex-basisを理解しよう
フレックスアイテムの大きさを細かく制御するプロパティが3つあります。
flex-grow（フレックスグロウ）は「余ったスペースをどれだけ受け取るか」を指定します。値が0なら受け取りません。値が1なら均等に受け取ります。値が2のアイテムは、1のアイテムの2倍のスペースを受け取ります。
flex-shrink（フレックスシュリンク）は「スペースが足りないとき、どれだけ縮むか」を指定します。値が0なら縮みません。値が大きいほど、より多く縮みます。デフォルトは1です。
flex-basis（フレックスベーシス）は「アイテムの基本サイズ」を指定します。widthと似ていますが、flexboxの中ではflex-basisが優先されます。200pxと書けば、基本幅が200pxになります。autoと書けば、中身の大きさに合わせます。
この3つをまとめて書くショートハンド（省略記法）が flex プロパティです。
flex: 1 1 200px; と書くと「grow:1、shrink:1、basis:200px」という意味です。
よく使うパターンを紹介します。
- flex: 1; → 余白を均等に分配して広がる
- flex: 0 0 200px; → 固定幅200pxで縮まない
- flex: 1 1 0; → 全アイテムが完全に均等な幅になる
align-selfで個別アイテムの配置を変える
align-itemsは全アイテムの縦方向の揃え方を一括で指定します。でも「このアイテムだけ下に揃えたい」ということもあります。そんなときはalign-selfを使います。
align-selfは個別のアイテムに指定します。値はalign-itemsと同じで、flex-start、flex-end、center、stretchが使えます。
たとえば、3つのボックスのうち2番目だけ下に揃えたいとき、2番目のボックスにalign-self: flex-end;と書きます。他のアイテムはalign-itemsの設定に従い、2番目だけ独自の位置に配置されます。
よく使うレイアウトパターン
パターン1：完全中央揃え
要素を縦横ともに中央に配置したいときは、justify-content と align-items を両方 center にします。
.container {\n display: flex;\n justify-content: center; /* 横方向：中央 */\n align-items: center; /* 縦方向：中央 */\n height: 200px;\n}パターン2：ナビゲーションバー
ロゴを左、メニューを右に配置するナビゲーションバーは space-between で作れます。
.nav {\n display: flex;\n justify-content: space-between; /* ロゴ左・メニュー右 */\n align-items: center;\n padding: 16px;\n}パターン3：カードの横並び
複数のカードを横並びにして、画面幅に応じて折り返すレイアウトです。
.card-list {\n display: flex;\n flex-wrap: wrap; /* 折り返しあり */\n gap: 24px;\n}\n\n.card {\n flex: 1 1 280px; /* 最小幅280px、余白を均等に分配 */\n background-color: white;\n border-radius: 12px;\n padding: 24px;\n}📖 詳しくはCSSグリッドレイアウト入門で解説しています。
パターン4：フッターを画面下部に固定する
ページの内容が少ないとき、フッターが画面の途中に来てしまうことがあります。flexboxを使えば、フッターを常に画面の下部に配置できます。
body要素にdisplay: flex;とflex-direction: column;を指定します。さらにmin-height: 100vh;で画面全体の高さを確保します。メインコンテンツにflex: 1;を指定すると、余白をすべてメインが受け取り、フッターが自然に下に押し下げられます。
このテクニックは多くのウェブサイトで使われています。覚えておくと便利です。
余白の調整にはmarginやpaddingも組み合わせて使います。余白の詳しい使い方は「marginとpaddingの違いと使い方」で学べます。
実際に書いてみよう
次のコードをコピーして、ブラウザで確認してみましょう。justify-content の値を変えると、並び方が変わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexboxの練習</title>
<style>
.container {
display: flex;
justify-content: center; /* ← ここを変えてみよう */
align-items: center;
gap: 16px;
height: 200px;
background-color: #f0f9ff;
}
.box {
background-color: #0d9488;
color: white;
padding: 24px;
border-radius: 8px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</body>
</html>💡 試してみよう：
justify-contentをflex-start・flex-end・space-betweenに変えてみるflex-direction: column;を追加して縦並びにしてみる- ボックスを4つ・5つに増やして
flex-wrap: wrap;を試してみる
👉 positionプロパティ完全解説も参考にしてください。
flexboxでよくある失敗と対策
flexboxを使い始めたとき、よくある失敗を紹介します。
失敗1：子要素ではなく親要素に指定していない
display: flex;は親要素（コンテナ）に書きます。子要素に書いても横並びにはなりません。「横並びにならない！」と思ったら、まずdisplay: flex;が親要素に書いてあるか確認しましょう。
失敗2：高さを指定していないのにalign-itemsが効かない
align-items: center;で縦方向の中央揃えをするには、コンテナに高さが必要です。高さがないと、中身の高さ＝コンテナの高さになるので、中央揃えの効果が見えません。height: 200px;やmin-height: 100vh;を指定してみましょう。
失敗3：flex-wrapを忘れて要素がはみ出す
アイテムが多いのにflex-wrap: wrap;を指定していないと、要素が画面からはみ出します。カードを並べるときは、必ずflex-wrap: wrap;を追加しましょう。
失敗4：gapが効かない古いブラウザ
gapプロパティはほとんどのブラウザで使えますが、古いブラウザでは効かないことがあります。その場合はmarginで代用できます。
flexboxとレスポンシブデザイン
flexboxはレスポンシブデザインと相性が抜群です。flex-wrap: wrap;を使えば、画面幅が狭くなったとき自動で折り返してくれます。
さらにメディアクエリと組み合わせると、画面サイズに応じてflex-directionを変えることもできます。たとえば、パソコンでは横並び（row）、スマホでは縦並び（column）にする、といった切り替えが簡単にできます。
レスポンシブデザインについて詳しく知りたい人は「レスポンシブデザイン入門」を読んでみてください。flexboxとメディアクエリを組み合わせた実践例を学べます。
flexboxをマスターすれば、ほとんどのウェブサイトのレイアウトが作れるようになります。まずはこの記事で学んだ基本を使って、自分のページを作ってみましょう。
まとめ
- ✅ flexbox は親要素に
display: flex;を指定するだけで使える - ✅ justify-content：横方向の揃え方（center・space-between など）
- ✅ align-items：縦方向の揃え方（center・flex-start など）
- ✅ flex-wrap: wrap：アイテムが多いとき自動で折り返す
- ✅ flex-direction: column：縦並びにする
- ✅
gapプロパティでアイテム間の余白を簡単に設定できる
flexboxを使いこなすと、レイアウトの幅が大きく広がります。レッスンでさらに詳しく学んでみましょう。