Flexbox縦並びレイアウト — 垂直方向のスタッキング
CSS Flexboxで垂直方向の縦並びレイアウトを作成。要素を上から下にスタックし、間隔、サイズ、配置を制御します。
Basic Layouts
詳細な説明
Flexboxによる垂直方向の縦並びレイアウト
縦並びレイアウトはフレックスアイテムを上から下へ垂直に積み重ねます。フレックスコンテナにflex-direction: columnを設定することで実現します。
CSSコード
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 0 0 auto;
}
.main {
flex: 1;
}
.footer {
flex: 0 0 auto;
}
仕組み
flex-direction: columnを使用すると、主軸が垂直になります。子要素は上から下にスタックされ、justify-contentが垂直方向の配分を制御し、align-itemsが水平方向の配置を制御します。
コンテナにmin-height: 100vhを設定すると、レイアウトが少なくともビューポート全体の高さを埋めることが保証されます。ヘッダーとフッターはflex: 0 0 autoでコンテンツに必要なスペースのみを取り、メインコンテンツエリアはflex: 1で残りのスペースすべてを埋めるように拡大します。
軸の入れ替え動作
rowからcolumnに切り替えると、配置プロパティの意味が入れ替わります:
| プロパティ | rowの場合 | columnの場合 |
|---|---|---|
justify-content |
水平方向 | 垂直方向 |
align-items |
垂直方向 | 水平方向 |
flex-basis |
幅を設定 | 高さを設定 |
column方向を使うタイミング
縦並びレイアウトは、ページレベルの構造(ヘッダー/コンテンツ/フッター)、サイドバーナビゲーション、フォームレイアウト、柔軟なサイズ設定が必要な垂直方向のスタッキングに不可欠です。
ユースケース
ページレベルのスキャフォールディング(ヘッダー、メイン、フッター)、フォームフィールドのスタッキング、サイドバーナビゲーションメニュー、または垂直方向のコンポーネントに使用します。flex-growと組み合わせることで、フッターをビューポートの下部に固定する最も簡単な方法です。