Flexbox横並びレイアウト — 水平方向のアイテム配置

CSS Flexboxで水平方向の横並びレイアウトを作成。アイテムは左から右に配置され、間隔、配置、分配オプションを設定可能です。

Basic Layouts

詳細な説明

Flexboxによる水平方向の横並びレイアウト

最も基本的なFlexboxパターンは水平方向の横並びレイアウトです。コンテナにdisplay: flexを設定すると、子要素は自動的に左から右へ水平方向に配置されます。

CSSコード

.container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.item {
  flex: 1;
}

仕組み

コンテナにdisplay: flexを適用すると、デフォルトのflex-directionrowなので、子要素は水平方向に並びます。gapプロパティはマージンを使わずにアイテム間に均一な間隔を追加します。

各子要素にflex: 1を設定するのはflex-grow: 1; flex-shrink: 1; flex-basis: 0%の省略形で、すべてのアイテムがコンテナ幅を均等に埋めるように拡大します。flex: 1がないと、アイテムはコンテンツの幅のみになります。

主要プロパティ

プロパティ 効果
flex-direction row アイテムが水平方向に流れる(デフォルト)
gap 16px アイテム間の均一な間隔
flex: 1 省略形 アイテムが均等にスペースを埋める

バリエーション

  • 固定+可変: 1つのアイテムにflex: 0 0 200px、他にflex: 1を設定して、固定サイドバーと可変メインコンテンツを作成。
  • 反転: flex-direction: row-reverseでHTMLを変更せずに視覚的な順序を反転。
  • 折り返し: flex-wrap: wrapを追加して、コンテナが狭い場合にアイテムを新しい行に折り返し。

この横並びレイアウトは、ナビゲーションバー、ツールバー、カードグリッド、モダンWebデザインにおけるほとんどの水平コンポーネント配置の基盤です。

ユースケース

ナビゲーションリンク、アクションボタン、商品カード、コンテンツセクションなど、要素を横に並べる必要がある場合に使用します。これはデフォルトのFlexbox動作であり、ほとんどのFlexベースのデザインの出発点です。

試してみる — Flexbox Playground

フルツールを開く