display: flex

レイアウト・配置

要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。

構文

Syntax

display: flex

コード例

例 1

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

実行結果

水平・垂直中央配置 - justify-content: center + align-items: center

中央配置されたボタン

💡 モーダル、ボタン、カードの中央配置に最適

子要素を水平・垂直中央に配置する最も簡単な方法

例 2

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

実行結果

ナビゲーションバー - justify-content: space-between + align-items: center

Logo

Home

About

Contact

💡 左端にロゴ、右端にボタン、間にナビゲーション

ナビゲーションバー：左端と右端に要素を配置

例 3

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

実行結果

レスポンシブカードレイアウト - flex-wrap: wrap + gap: 1rem

Card 1

Card 2

Card 3

💡 幅が足りない場合は自動で折り返し。レスポンシブ対応

レスポンシブなカードレイアウト：幅が足りない場合は折り返し

例 4

.sidebar-layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

実行結果

サイドバーレイアウト - flex: 0 0 固定幅 + flex: 1

Sidebar
(80px固定)

メインコンテンツ (flex: 1で残り全幅)

💡 サイドバーは固定幅、メインは可変幅で画面サイズに対応

サイドバーレイアウト：固定幅サイドバーと可変メインコンテンツ

💡 TIPS

中央配置、等間隔配置、レスポンシブレイアウトが簡単に実現できる。子要素にflex: 1を指定すると等幅になる。gap プロパティで間隔調整が便利。

⚠️ よくある間違い

親要素にdisplay: flexを指定し忘れると子要素のflexプロパティが効かない。flex-direction を理解せずに使うと意図しない配置になる。

ブラウザサポート

IE11+（一部制限あり）, 全モダンブラウザ

display: flex

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート