CSS Flexbox レスポンシブデザイン

Volardev 編集部 April 13, 2026

CSS Flexbox とメディアクエリ（Media Queries）を組み合わせることで、さまざまな画面サイズやデバイスに対応したレスポンシブなウェブサイトを簡単に作成できます。

1. レスポンシブな Flexbox

通常、Flexbox のレイアウトはビューポートのサイズに関わらず一定ですが、メディアクエリを使用することで、画面幅に応じてアイテムの並び方やサイズを動的に変更できます。

1.1 フレックス方向の切り替え

たとえば、大きな画面ではアイテムを横並び（row）にし、スマートフォンなどの小さな画面では縦並び（column）に切り替えるといった制御が可能です。

以下の例では、画面幅が 800px 未満になったときに、flex-direction を column に変更します。

/* デフォルトのスタイル（横並び） */
.flex-container {
  display: flex;
  flex-direction: row;
}

/* 画面幅が800px以下の場合のレスポンシブ設定 */
@media (max-width: 800px) {
  .flex-container {
    /* 縦並びに変更 */
    flex-direction: column;
  }
}

2. レスポンシブな Flexbox レイアウト（カラム制御）

flex プロパティを使用して、各アイテムの幅をパーセンテージで指定することで、グリッドのようなレスポンシブな段組みを作成できます。

2.1 画面サイズに応じたカラム数の調整

以下の例では、通常は 4 カラム（25% ずつ）で表示し、画面が小さくなるにつれて 2 カラム（50%）、さらには 1 カラム（100%）へと変化させます。

.flex-item {
  /* デフォルト：4カラム */
  flex: 25%;
}

/* タブレット向け：2カラム */
@media (max-width: 800px) {
  .flex-item {
    flex: 50%;
  }
}

/* モバイル向け：1カラム */
@media (max-width: 500px) {
  .flex-item {
    flex: 100%;
  }
}

3. レスポンシブな画像ギャラリー

Flexbox は、画像ギャラリーのレスポンシブ化にも非常に有効です。flex-wrap: wrap; を使用することで、画像がコンテナ内に収まりきらない場合に自動的に折り返されます。

.row {
  display: flex;
  /* アイテムを折り返す設定 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* カラムの設定 */
.column {
  flex: 25%; /* デフォルトは4カラム */
  max-width: 25%;
  padding: 0 4px;
}

/* 画面幅が800px以下なら2カラム */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 画面幅が600px以下なら1カラム（全幅） */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

4. レスポンシブな Web ページの実装例

Flexbox を使用して、ナビゲーションバー、サイドバー、メインコンテンツを含む完全なレスポンシブページを構築できます。

/* ヘッダーのスタイル */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

/* ナビゲーションバーのスタイル */
.navbar {
  display: flex;
  background-color: #333;
}

/* ナビゲーションリンクのスタイル */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 画面幅が小さい時、ナビゲーションを縦並びにする */
@media (max-width: 400px) {
  .navbar {
    flex-direction: column;
  }
}

/* コンテンツレイアウト */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* サイドバー（全体の25%） */
.side {
  flex: 25%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* メインコンテンツ（全体の75%） */
.main {
  flex: 75%;
  background-color: white;
  padding: 20px;
}

/* 画面幅が小さい時、サイドバーとメインを縦に積み上げる */
@media (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

Flexbox を活用したレスポンシブデザインは、従来の Float や Table レイアウトに比べてコードが非常に簡潔になり、複雑な計算も不要です。特に flex-direction: column; への切り替えは、モバイル最適化における最も基本的かつ強力なテクニックの一つと言えます。