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と組み合わせることで、フッターをビューポートの下部に固定する最も簡単な方法です。

試してみる — Flexbox Playground

フルツールを開く