Flexbox横並びレイアウト — 水平方向のアイテム配置
CSS Flexboxで水平方向の横並びレイアウトを作成。アイテムは左から右に配置され、間隔、配置、分配オプションを設定可能です。
Basic Layouts
詳細な説明
Flexboxによる水平方向の横並びレイアウト
最も基本的なFlexboxパターンは水平方向の横並びレイアウトです。コンテナにdisplay: flexを設定すると、子要素は自動的に左から右へ水平方向に配置されます。
CSSコード
.container {
display: flex;
flex-direction: row;
gap: 16px;
}
.item {
flex: 1;
}
仕組み
コンテナにdisplay: flexを適用すると、デフォルトのflex-directionはrowなので、子要素は水平方向に並びます。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ベースのデザインの出発点です。