実践！Flexboxレイアウトパターン集

パターン１：ヘッダーレイアウト – ロゴとナビゲーションの美しいランデブー

Webサイトの顔とも言えるヘッダー。左側にロゴ、右側にナビゲーションメニューを配置するのは定番中の定番だね。Flexboxなら、これが驚くほど簡単に実現できるんだ。

HTMLの骨組み (例)

<header class="my-header">
  <div class="logo">サイトロゴ</div>
  <nav class="main-nav">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </nav>
</header>

Flexboxの魔法の呪文 (CSSのポイント)

.my-header {
  display: flex;                 /* フレックスコンテナ化！ */
  justify-content: space-between; /* 両端に寄せる！ロゴが左、ナビが右 */
  align-items: center;           /* 上下中央揃え！ */
}

.main-nav ul {
  display: flex;                 /* ナビの項目も横並びに */
  list-style: none;              /* リストの点を消す */
  padding: 0;
  margin: 0;
  gap: 1em;                      /* メニュー間の隙間 (新しい書き方) */
}
/* 古いブラウザも考えるなら li に margin-left や margin-right でもOK */

justify-content: space-between; が、ロゴとナビゲーションをヘッダーの両端にピタッと配置してくれる魔法の呪文だよ！

パターン２：フッターレイアウト – コピーライトとサブリンクの整理整頓

ページの一番下にあるフッターも、Flexboxでスッキリ整理できるよ。コピーライト情報を左に、いくつかのサブリンクを右に配置したり、複数の情報をカラムで分けたりするのもお手の物だ。

シンプル版CSSのポイント

.my-footer-simple {
  display: flex;
  justify-content: space-between; /* 両端揃え */
  align-items: center;           /* 上下中央揃え */
  padding: 1em;
  background-color: #333;
  color: #fff;
}
.my-footer-simple ul { /* リンクを横並びにする */
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1em;
}

複数カラム版CSSのポイント

.my-footer-columns {
  display: flex;
  justify-content: space-around; /* 各カラムを均等に配置 */
  flex-wrap: wrap;             /* 画面が狭くなったら折り返す */
  gap: 1.5em;                  /* カラム間の隙間 */
  padding: 1.5em;
  background-color: #222;
  color: #ccc;
}
.footer-column {
  flex: 1;                     /* 空きスペースを分け合う */
  min-width: 180px;            /* これより狭くなったら折り返すのを促す */
}
.footer-column h5 { /* ... */ }
.footer-column ul { /* ... */ }

パターン３：カード型レイアウト – 情報カードたちが踊る魔法のステージ

商品リスト、ブログ記事の一覧、写真ギャラリーなど、カード型の情報をきれいに並べるのはWebデザインの定番だね。Flexboxを使えば、カードを横に並べて、画面幅に応じて自動で折り返し、さらにカードの高さを揃えたり、カード内のフッター（ボタンなど）を常に下部に固定したりすることもできるんだ。

HTMLの骨組み (例)

<div class="card-container">
  <article class="card">
    <h3>カードタイトル1</h3>
    <div class="card-body"><p>カード本文...</p></div>
    <div class="card-action"><a href="#">もっと読む</a></div>
  </article>
  <!-- 他のカードも同様に ... -->
</div>

Flexboxの魔法の呪文 (CSSのポイント)

.card-container {
  display: flex;
  flex-wrap: wrap; /* 画面幅に応じて折り返す */
  gap: 1.5em;      /* カード間の隙間 */
}
.card {
  flex: 1 1 280px; /* 基本幅280pxで、伸び縮みする */
  /* カード内のフッターを一番下に固定するテクニック */
  display: flex;
  flex-direction: column; /* カード内を縦方向にフレックス化 */
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 1em;
}
.card-body {
  flex-grow: 1;    /* この部分が伸びて、下の要素を押し下げる */
}
.card-action {
  margin-top: auto;  /* または、.card-body に flex-grow: 1 を指定 */
  /* ボタンのスタイルなど ... */
}

カードの高さを揃えたい場合は、align-items: stretch; (コンテナ側、初期値) が効いている状態で、カードアイテム自身の高さを成り行きにすれば、中のコンテンツ量に関わらず同じ高さになることが多いよ（ただし、アイテムのmin-heightやコンテンツの折り返しなどにもよる）。 そして、カード内のフッターを一番下に固定するには、カード自体をフレックスコンテナ(flex-direction: column)にして、本文部分にflex-grow: 1を指定するか、フッター要素にmargin-top: auto;を指定するのが一般的なテクニックだ！

パターン４：ナビゲーションメニュー – 多彩な表現でサイトを案内

ナビゲーションメニューもFlexboxの得意分野！横一列に並べたり、均等な幅にしたり、特定の部分だけ右に寄せたり。そしてもちろん、スマホサイズでは縦一列に切り替えるのもお手の物だ。

HTMLの骨組み (例)

<nav class="my-menu">
  <ul>
    <li><a href="#">項目1</a></li>
    <li><a href="#">項目2</a></li>
    <li class="special-item"><a href="#">特別項目</a></li>
  </ul>
</nav>

Flexboxの魔法の呪文 (CSSのポイント)

.my-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  /* gap: 1em; /* アイテム間の隙間 */
}
.my-menu li { /* gapを使わない場合 */
  margin-right: 1em;
}
.my-menu li:last-child {
  margin-right: 0;
}

/* 均等幅メニューにする場合 */
.my-menu.equal-width ul li {
  flex: 1; /* 全てのアイテムが同じ割合でスペースを分け合う */
  text-align: center; /* 文字を中央に */
  margin-right:0; /* 均等なので個別マージン不要 */
}
/* 特定のアイテムを右に寄せる場合 (例: .special-item) */
.my-menu .special-item {
  margin-left: auto; /* これだけで右に飛んでいく！ */
}

/* スマホで縦積みにする場合 */
@media (max-width: 600px) {
  .my-menu.responsive ul {
    flex-direction: column; /* 並びを縦方向に！ */
    align-items: stretch;   /* 各アイテムを幅いっぱいに伸ばす */
  }
  .my-menu.responsive ul li {
    margin-right: 0;
    margin-bottom: 0.5em; /* 縦の隙間 */
  }
}

ハンバーガーアイコンをクリックしてメニューを開閉するような動きは、JavaScriptの助けが必要になることが多いけど、Flexboxでレイアウトの基本を作っておけば、そこに動きを足すのもスムーズだよ。

パターン５：フォーム要素の整列 – 入力しやすく、見た目も美しく

お問い合わせフォームや会員登録フォームなど、入力項目がたくさん並ぶフォームも、Flexboxを使えばスッキリ整理できるよ。ラベルと入力欄を横に並べたり、複数の入力欄を一行にまとめたりするのも簡単だ。

HTMLの骨組み (例)

<form class="my-form">
  <div class="form-row">
    <label for="user-name">氏名:</label>
    <input type="text" id="user-name">
  </div>
  <div class="form-row">
    <label for="user-email">Email:</label>
    <input type="email" id="user-email">
  </div>
  <div class="form-actions">
    <button type="submit">登録</button>
  </div>
</form>

Flexboxの魔法の呪文 (CSSのポイント)

.form-row {
  display: flex;
  align-items: center; /* ラベルと入力欄の上下中央を揃える */
  margin-bottom: 1em;
  gap: 0.8em; /* ラベルと入力欄の間の隙間 */
}
.form-row label {
  flex-basis: 120px; /* ラベルの幅を固定 (または min-width) */
  flex-shrink: 0;    /* ラベルは縮まないように */
  text-align: right; /* 右寄せにするとキレイに見えることも */
}
.form-row input[type="text"],
.form-row input[type="email"] {
  flex-grow: 1;      /* 入力欄は残りのスペースを全部使う */
  /* padding, borderなどのスタイル ... */
}
.form-actions {
  display: flex;
  justify-content: flex-end; /* ボタンを右端に寄せる */
  margin-top: 1.5em;
}

パターン６：メディアオブジェクト – 画像とテキスト、定番コンビの美しい共演

左側にアイコンやユーザーのアバター画像、右側にその説明やコメントなどのテキスト、という「メディアオブジェクト」のレイアウトは、SNSのタイムラインやコメント欄などで本当によく見かけるよね。Flexboxなら、テキストが長くなっても画像の縦位置が崩れたりせず、キレイに配置できるんだ。

表示デモ

ウルトラユーザー

Flexboxって本当に便利！最初は難しそうだったけど、ウルトラ先生の解説でだんだん分かってきた気がする。このメディアオブジェクトも、自分で作れるようになるなんて感動です！これからも頑張ります！

新しいお知らせ

Flexboxマスター教室の新しいレッスンが追加されました！ぜひチェックしてみてくださいね。

HTMLの骨組み (例)

<div class="media-object">
  <img src="avatar.png" alt="アバター" class="media-figure">
  <div class="media-content">
    <h5>ユーザー名</h5>
    <p>コメント本文...</p>
  </div>
</div>

Flexboxの魔法の呪文 (CSSのポイント)

.media-object {
  display: flex;
  align-items: flex-start; /* テキストが長くなった時、画像が上に寄るように */
  gap: 1em;                /* 画像とテキストの間の隙間 */
}
.media-figure {
  /* width, height などで画像のサイズを指定 */
  flex-shrink: 0;        /* 画像が縮まないようにする */
}
.media-content {
  flex: 1;                 /* 残りのスペースを全てテキスト部分が使う */
}

パターン７：垂直中央揃え – Flexboxなら、あの悩みも一発解決！

「要素を上下中央に配置したい！」これは昔から多くのWebデザイナーを悩ませてきた問題の一つだったんだ。でも、Flexboxを使えば、これもとっても簡単に実現できる！

HTMLの骨組み (例)

<div class="center-parent">
  <div class="center-child">中央にしたい要素</div>
</div>

Flexboxの魔法の呪文 (CSSのポイント)

.center-parent {
  display: flex;
  align-items: center;    /* これで上下中央揃え！ */
  justify-content: center; /* これで左右中央揃え！ */
  min-height: 200px;       /* 親要素に高さがないと効果が分からないので指定 */
  /* 他のスタイル (背景色など) ... */
}
.center-child {
  /* 子要素のスタイル ... */
}

親要素をフレックスコンテナにして、align-items: center; と justify-content: center; を指定するだけ！ ただし、親要素に何らかの高さ（height や min-height）がないと、垂直方向の中央揃えの効果は見た目では分からないから注意してね。