【無料】CSS Flexbox 使い方ガイド＆ジェネレーター｜レスポンシブレイアウトの完全入門

CSS Flexbox（フレックスボックス）とは？

CSS Flexbox（フレックスボックス）は、要素を「横並び」や「縦並び」に柔軟に配置できる、CSSの1次元レイアウトシステムです。

従来のfloatベースのレイアウトでは、要素を横に並べるだけでもclearfixなどの工夫が必要でした。Flexboxを使えば、ナビゲーションの横並び、ボタン群の均等配置、要素の上下左右中央揃えなどが、数行のCSSで直感的に実装できます。

「1次元」とは、横方向か縦方向のどちらか一方を主軸として制御するという意味です。行と列の両方を同時に制御したい場合は、CSS Gridが適しています。Flexboxは「1列の中での並び方」を柔軟にコントロールすることに特化しており、Web制作においてCSS Gridと並ぶ最も使用頻度の高いレイアウト手法です。

display: flex の書き方

Flexboxを使うには、親要素（フレックスコンテナ）に display: flex; を指定します。

.container {
  display: flex;
}

これだけで、.container の直下の子要素（フレックスアイテム）が自動的に横並びになります。CSS Gridの場合は display: grid; を指定しただけでは横並びにならないため、「横並びにしたいだけならFlexbox」と覚えておくと判断が楽です。

Flexboxの軸の概念（主軸と交差軸）

Flexboxを理解するうえで最も重要なのが「主軸」と「交差軸」の概念です。

• 主軸（Main Axis）：フレックスアイテムが並ぶ方向。デフォルトは水平方向（左→右）
• 交差軸（Cross Axis）：主軸と直角に交わる方向。デフォルトは垂直方向（上→下）

主軸の方向は flex-direction で変更できます。

.container {
  display: flex;
  flex-direction: row;            /* デフォルト：左→右に横並び */
}

• row（デフォルト）：左→右の横並び
• row-reverse：右→左の横並び
• column：上→下の縦並び
• column-reverse：下→上の縦並び

justify-content は主軸方向、align-items は交差軸方向の配置を制御します。flex-direction を column に変えると主軸が縦になるため、justify-content が縦方向、align-items が横方向の配置に変わります。この「軸が入れ替わる」という性質を理解しておくと、Flexboxの挙動で混乱しにくくなります。

CSS Flexboxで中央揃えする方法

Flexboxが最も力を発揮する場面の一つが「中央揃え」です。従来のCSSでは上下中央揃えが非常に難しかったですが、Flexboxなら3行で実現できます。

水平方向の中央揃え

.container {
  display: flex;
  justify-content: center;
}

justify-content: center; は主軸方向（デフォルトでは水平方向）にアイテムを中央に配置します。テキスト、ボタン、カードなど、あらゆる要素の水平中央揃えに使えます。

垂直方向の中央揃え

.container {
  display: flex;
  align-items: center;
  height: 300px;  /* コンテナに高さが必要 */
}

align-items: center; は交差軸方向（デフォルトでは垂直方向）にアイテムを中央に配置します。コンテナに明示的な高さがないと効果が見えないので注意してください。

上下左右の完全中央揃え

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

justify-content: center; と align-items: center; を組み合わせるだけで、コンテナ内の要素を上下左右の中央に配置できます。ログイン画面やローディング画面など、画面中央に要素を配置したい場面で頻繁に使われるパターンです。

height: 100vh; はビューポート（画面）の高さ100%を意味します。画面全体の中央に配置したい場合はこの指定を使い、特定のセクション内で中央揃えしたい場合はそのセクションの高さを指定してください。

CSS Flexbox 無料ジェネレーター：使い方3ステップ

CSS Flexboxジェネレーターは、Flexboxのプロパティを選択して、リアルタイムでレイアウトを確認しながらCSSコードを生成できる無料ツールです。

レスポンシブデザインの構築、複雑なレイアウトの実装、プロトタイプ作成や学習用途など幅広いシーンで役立ちます。Flexboxの使い方が初めての方でも、このツールを使えば各プロパティの動きを視覚的に確認しながら理解を深めることができます。

▶ CSS Flexbox Generator を使ってみる

ステップ1：プロパティを設定

親要素の設定として、display: flex; を基礎に、flex-direction（要素の方向）や justify-content（主軸の整列）、align-items（交差軸の整列）を調整します。子要素についても、個別に flex-grow や flex-shrink などの配置・伸縮を設定できます。

ステップ2：プレビューを確認

設定内容がリアルタイムで反映されます。プロパティの値を変更するたびにレイアウトが即座に更新されるため、「この値を変えるとどう変わるのか」を目で見ながら学べます。

ステップ3：コードをコピーして使う

作成したCSSコードをコピーして、自分のプロジェクトに貼り付けるだけ。ジェネレーターで試したレイアウトをそのまま実装に反映できます。

CSS Flexboxの主要プロパティ一覧

Flexboxには親要素（フレックスコンテナ）に指定するプロパティと、子要素（フレックスアイテム）に指定するプロパティがあります。

親要素（フレックスコンテナ）のプロパティ

justify-content の値の中で実務でよく使うのは center（中央揃え）、space-between（両端揃えで間を均等配分）、flex-start（左寄せ）の3つです。space-between はナビゲーションバーでロゴとメニューを左右に分ける場面で特に重宝します。

flex-wrap: wrap; は、アイテムがコンテナの幅を超えたときに自動的に折り返す設定です。レスポンシブ対応のカードレイアウトを作る際に必須のプロパティです。

子要素（フレックスアイテム）のプロパティ

実務で最も使う書き方は flex: 1; です。これは「余ったスペースを均等に分配して、アイテムを伸ばす」という意味です。たとえば3つのアイテム全てに flex: 1; を指定すると、コンテナの幅を3等分します。

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% と同じ */
}

特定のアイテムだけ固定幅にしたい場合は flex: 0 0 250px;（伸びない・縮まない・基本幅250px）と指定します。サイドバーのように「幅を固定したい要素」と「残りを埋める要素」を組み合わせるときに便利です。

Flexboxの実践レイアウト例

ここでは、実際のWebサイトでよく使われるFlexboxのレイアウトパターンを紹介します。

ナビゲーションバー

Flexboxの最も代表的な使い方がナビゲーションバーです。ロゴとメニューを左右に分ける「スペース・ビトウィーン」パターンは、ほぼすべてのWebサイトで見られます。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

justify-content: space-between; でロゴとメニューが左右に分かれ、align-items: center; で上下中央に揃います。メニュー内のリンク同士の間隔は、入れ子のFlexboxで gap: 24px; を使っています。

モバイル対応でハンバーガーメニューに切り替える場合は、メディアクエリで .nav-links を非表示にし、JavaScriptでトグル表示する実装が一般的です。

カードレイアウト（横並び＆折り返し）

ブログ一覧やポートフォリオなどのカードレイアウトもFlexboxで実装できます。flex-wrap: wrap; で自動的に折り返させます。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* 最小300px、余ったスペースは均等分割 */
  max-width: 400px;
}

<div class="cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
  <div class="card">カード6</div>
</div>

flex: 1 1 300px; は「基本幅300px、余ったスペースがあれば伸びる、スペースが足りなければ縮む」という意味です。画面幅に応じて1列〜3列に自動で切り替わるため、ブレイクポイントを書かなくてもある程度のレスポンシブ対応が実現できます。

ただし、カードの列数と行数を正確にコントロールしたい場合は、CSS Gridの repeat(auto-fit, minmax()) の方が適しています。Flexboxは「並べる」には強いですが、「行と列のグリッド」を作るのはGridの得意分野です。

フッター（均等配置）

フッターのリンクグループを均等に配置するパターンです。

.footer {
  display: flex;
  justify-content: space-around;
  padding: 40px 24px;
}

.footer-section {
  flex: 1;
  max-width: 250px;
}

<footer class="footer">
  <div class="footer-section">
    <h4>サービス</h4>
    <ul>
      <li><a href="#">Web制作</a></li>
      <li><a href="#">デザイン</a></li>
    </ul>
  </div>
  <div class="footer-section">
    <h4>会社情報</h4>
    <ul>
      <li><a href="#">概要</a></li>
      <li><a href="#">採用</a></li>
    </ul>
  </div>
  <div class="footer-section">
    <h4>お問い合わせ</h4>
    <ul>
      <li><a href="#">フォーム</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </div>
</footer>

CSS FlexboxとGridの違い・使い分け

FlexboxとCSS Gridはどちらも現代のCSSレイアウトの基盤ですが、設計思想が異なります。

迷ったときの判断基準は「行と列の両方を意識する必要があるか？」です。Noなら Flexbox、YesならCSS Grid。

具体的には、ヘッダー内のロゴとメニューを横並びにするだけなら Flexbox。ページ全体をヘッダー・サイドバー・メイン・フッターに分割するなら CSS Grid。カード一覧は、行内の並びだけ制御するなら Flexbox、行×列の配置を正確に制御するなら CSS Grid が適しています。

実務では両方を組み合わせることも多いです。ページ全体の骨格を Grid で組み、ナビゲーションバーの中身は Flexbox で整列させる、というのが典型的なパターンです。

▶ CSS Grid 使い方ガイド＆ジェネレーターはこちら

まとめ

CSS Flexbox（フレックスボックス）は、横並び・縦並び・中央揃えといったWebレイアウトの基本操作をシンプルなコードで実現できる、CSS必須のレイアウト手法です。

display: flex; でFlexboxを有効化し、justify-content で主軸方向、align-items で交差軸方向の配置を制御する。この3つのプロパティだけでも、ナビゲーションバーや中央揃えレイアウトが簡単に作れます。さらに flex-wrap: wrap; を追加すれば、レスポンシブ対応のカードレイアウトも実装できます。

Flexboxジェネレーターを使えば、プロパティの動きを視覚的に確認しながらコードを生成できるので、まだFlexboxに慣れていない方もぜひ活用してください。

▶CSS Flexbox Generator を使ってみる

次のステップ

Flexboxの基本がわかったら、以下の記事もあわせてどうぞ。

• ▶ CSS Grid 使い方ガイド＆ジェネレーター — 2次元レイアウトの定番。Flexboxとの使い分けも解説。
• ▶ CSSセレクター学習ツール — フレックスアイテムの指定に使うセレクタの基礎を学べます。
• ▶ CSSプロパティ一覧 — Flexbox以外のCSSプロパティも体系的にチェック。
• ▶ JavaScript DOM操作の練習問題 — Flexboxで作ったUIをJavaScriptで動かす練習に。