CSSでdisplay: flexを使って縦並びにする方法｜横並びとの違いもわかりやすく解説

CSS

「flexbox」といえば、横に並べるために使うものと思っていませんか？

実はdisplay: flexは、ちょっと設定を変えるだけで縦並び（縦方向のレイアウト）にも簡単にできます。

これをうまく使うと、スマホの画面で自然に縦に並べたり、フォームやボタンを上下にスッキリ配置できます。

この記事では、CSSのdisplay: flexを使って要素を縦並びにする基本の方法や注意点、横並びとの違いをわかりやすく紹介します。「え、こんなに簡単だったの？」と驚くこと間違いなしです！

スポンサーリンク

そもそもflexのデフォルトは「横並び」

flexboxの基本動作

display: flexを指定すると、デフォルトではflex-direction: rowが適用されます。つまり、子要素は横方向（左から右）に並びます。

基本のコード例

.container {
  display: flex;
}

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

結果：アイテム1、アイテム2、アイテム3が横に一列に並ぶ

横並びがよく使われる場面

ナビゲーションメニュー

.nav {
  display: flex;
}

.nav-item {
  padding: 10px 20px;
}

用途：ヘッダーのメニュー項目を横に配置

カードレイアウト

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ddd;
}

用途：商品カードやブログ記事を横に並べる

ボタングループ

.button-group {
  display: flex;
}

.button {
  margin-right: 10px;
}

用途：「保存」「キャンセル」などのボタンを横に配置

なぜ横並びがデフォルト？

歴史的背景

  • HTML の自然な流れ：左から右に読む文化圏に合わせて
  • インライン要素の延長：<span>や<a>の並び方を踏襲
  • 使用頻度：ナビゲーションやボタン配置で横並びの需要が高い

display: flexで縦並びにするには？

flex-direction: columnの魔法

flex-direction: column;を指定すると、子要素が縦（上から下）に並びます。

基本の縦並びコード

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

結果：アイテム1、アイテム2、アイテム3が縦に一列に並ぶ

flex-directionの全オプション

値方向説明
row横（左→右）デフォルト、水平方向
row-reverse横（右→左）水平方向で順序反転
column縦（上→下）垂直方向
column-reverse縦（下→上）垂直方向で順序反転

各方向の実例

row-reverse（右から左へ）

.container {
  display: flex;
  flex-direction: row-reverse;
}

結果：アイテム3、アイテム2、アイテム1の順で横並び

column-reverse（下から上へ）

.container {
  display: flex;
  flex-direction: column-reverse;
}

結果：アイテム3、アイテム2、アイテム1の順で縦並び

縦並びの実用例

スマホ向けメニュー

.mobile-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.menu-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

メリット：スマホの狭い画面で各項目がタップしやすくなる

入力フォーム

.form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  margin-bottom: 5px;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ccc;
}

メリット：ラベルと入力欄が縦に整列して見やすい

サイドバーのウィジェット

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.widget {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

メリット：複数のウィジェットが自然に縦積みされる

レスポンシブでの切り替え

PCでは横、スマホでは縦

.container {
  display: flex;
  flex-direction: row; /* PC: 横並び */
}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* スマホ: 縦並び */
  }
}

効果：画面サイズに応じて最適なレイアウトに自動変更

縦並び＋中央揃えにする方法

flexboxの軸を理解しよう

縦並び（flex-direction: column）の場合の軸は以下のようになります：

  • 主軸（Main Axis）：縦方向（上から下）
  • 交差軸（Cross Axis）：横方向（左から右）

横方向に中央寄せ：align-items

align-itemsを使うと、交差軸（横方向）に中央寄せできます。

基本コード

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

実用例：カードを横中央に配置

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

結果：複数のカードが縦に並び、それぞれが横方向の中央に配置

align-itemsの全オプション

値効果使用場面
stretch交差軸いっぱいに伸ばすデフォルト
flex-start交差軸の開始位置左寄せ
flex-end交差軸の終了位置右寄せ
center交差軸の中央中央寄せ
baselineベースライン揃えテキスト揃え

縦方向（主軸）に中央寄せ：justify-content

親要素の高さを決めて、justify-contentを使うと縦方向の配置を制御できます。

基本コード

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 400px; /* 高さが必要 */
}

実用例：ページ全体を中央配置

.full-height-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 画面全体の高さ */
}

.content {
  text-align: center;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 12px;
}

効果：ログイン画面やランディングページで画面中央に要素配置

justify-contentの全オプション

値効果使用場面
flex-start主軸の開始位置上寄せ
flex-end主軸の終了位置下寄せ
center主軸の中央中央寄せ
space-between要素間を等間隔上下端配置
space-around要素周囲を等間隔均等配置
space-evenly完全に等間隔完全均等配置

完璧な中央配置の実現

上下左右どちらも中央

.perfect-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

実用例：モーダルダイアログ

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
}

space系の活用例

ヘッダーとフッターを上下端に配置

.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
}

.header {
  background: #333;
  color: white;
  padding: 20px;
}

.main {
  flex: 1; /* 残りスペースを占有 */
  padding: 20px;
}

.footer {
  background: #f8f9fa;
  padding: 20px;
  text-align: center;
}

効果：ヘッダーが上、メインコンテンツが中央、フッターが下に固定

横並びと縦並びの違いを整理

flex-directionによる軸の変化

横並び（row）の場合

.horizontal {
  display: flex;
  flex-direction: row;
}
  • 主軸：横方向（左→右）
  • 交差軸：縦方向（上→下）
  • justify-content：左右方向の配置制御
  • align-items：上下方向の配置制御

縦並び（column）の場合

.vertical {
  display: flex;
  flex-direction: column;
}
  • 主軸：縦方向（上→下）
  • 交差軸：横方向（左→右）
  • justify-content：上下方向の配置制御
  • align-items：左右方向の配置制御

実際の比較例

同じCSSプロパティでも結果が変わる

横並びでの中央寄せ

.horizontal-center {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 左右中央 */
  align-items: center;     /* 上下中央 */
  height: 200px;
}

縦並びでの中央寄せ

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央 */
  align-items: center;     /* 左右中央 */
  height: 200px;
}

プロパティ効果の対比表

プロパティ横並び（row）縦並び（column）
justify-content: center左右中央上下中央
justify-content: space-between左右端に配置上下端に配置
align-items: center上下中央左右中央
align-items: flex-start上寄せ左寄せ
align-items: flex-end下寄せ右寄せ

よくある間違いと対処法

間違い例1：軸を混同

/* 縦並びで左右中央にしたいのに... */
.wrong {
  display: flex;
  flex-direction: column;
  justify-content: center; /* これは上下中央 */
}

/* 正解 */
.correct {
  display: flex;
  flex-direction: column;
  align-items: center; /* 左右中央はこちら */
}

間違い例2：高さ指定を忘れる

/* justify-contentが効かない */
.wrong {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 高さ指定がないと効果なし */
}

/* 正解 */
.correct {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px; /* 高さ指定が必要 */
}

使い分けの指針

横並びを選ぶべき場面

  • ナビゲーションメニュー
  • ボタングループ
  • カード一覧（PC表示）
  • タブメニュー
  • ツールバー

縦並びを選ぶべき場面

  • フォーム要素
  • モバイルメニュー
  • サイドバーウィジェット
  • 縦長リスト
  • ステップ表示

レスポンシブでの切り替え戦略

.responsive-container {
  display: flex;
}

/* デスクトップ：横並び */
@media (min-width: 769px) {
  .responsive-container {
    flex-direction: row;
  }
}

/* タブレット・スマホ：縦並び */
@media (max-width: 768px) {
  .responsive-container {
    flex-direction: column;
  }
}

実践的な活用例とテクニック

よくあるレイアウトパターン

パターン1：フォームレイアウト

.form-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

HTML例

<form class="form-container">
  <div class="form-group">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-group">
    <label for="message">メッセージ</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>
  <button type="submit">送信</button>
</form>

パターン2：カードのスタック表示

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1a1a1a;
}

.card-date {
  color: #666;
  font-size: 0.875rem;
}

パターン3：ナビゲーションの縦並び

.sidebar-nav {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  padding: 20px 0;
  min-height: 100vh;
  width: 250px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nav-item:hover {
  background-color: #e9ecef;
}

.nav-item.active {
  background-color: #007bff;
  color: white;
}

.nav-icon {
  margin-right: 12px;
  width: 20px;
  height: 20px;
}

高度なテクニック

gapプロパティで間隔調整

.gap-example {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 要素間の統一間隔 */
}

/* 従来のmarginを使う必要がない */
.old-way {
  display: flex;
  flex-direction: column;
}

.old-way > * {
  margin-bottom: 16px; /* 面倒な指定 */
}

.old-way > *:last-child {
  margin-bottom: 0; /* 最後の要素は除外 */
}

flex-growで伸縮制御

.stretch-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background: #333;
  color: white;
  padding: 20px;
  /* 固定サイズ */
}

.main-content {
  flex: 1; /* flex-grow: 1 の省略形 */
  padding: 20px;
  overflow-y: auto;
  /* 残りスペースを占有 */
}

.footer {
  background: #f8f9fa;
  padding: 10px 20px;
  /* 固定サイズ */
}

ネストしたflexコンテナ

.complex-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section {
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

レスポンシブ対応のベストプラクティス

モバイルファーストアプローチ

/* モバイル（縦並び）がベース */
.responsive-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

/* タブレット：2列表示 */
@media (min-width: 768px) {
  .responsive-grid {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 24px;
  }
  
  .responsive-grid > * {
    flex: 0 0 calc(50% - 10px);
  }
}

/* デスクトップ：3列表示 */
@media (min-width: 1024px) {
  .responsive-grid {
    padding: 32px;
  }
  
  .responsive-grid > * {
    flex: 0 0 calc(33.333% - 14px);
  }
}

コンテナクエリ対応（将来対応）

@container (max-width: 500px) {
  .adaptive-layout {
    flex-direction: column;
  }
}

@container (min-width: 501px) {
  .adaptive-layout {
    flex-direction: row;
  }
}

パフォーマンスとアクセシビリティ

パフォーマンス最適化

.optimized-flex {
  display: flex;
  flex-direction: column;
  /* GPU加速を有効化 */
  transform: translateZ(0);
  /* スムーズなアニメーション */
  transition: transform 0.2s ease;
}

/* will-changeでブラウザに最適化のヒント */
.animating-element {
  will-change: transform;
}

アクセシビリティ配慮

.accessible-nav {
  display: flex;
  flex-direction: column;
}

.accessible-nav a {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  min-height: 44px; /* タッチターゲットサイズ */
  color: #333;
  text-decoration: none;
}

.accessible-nav a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 縦並び順序の視覚的調整 */
.visual-order {
  order: 2; /* 視覚順序を変更 */
}

/* スクリーンリーダー用の隠しテキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

まとめ

CSSのdisplay: flexはflex-directionを使い分けるだけで、横並びも縦並びも自由自在にコントロールできるとてもパワフルなレイアウト方法です。

重要ポイントの再確認

基本の使い分け

  • 横並び：flex-direction: row（デフォルト）
  • 縦並び：flex-direction: column

中央揃えの方法

  • 横方向中央：align-items: center
  • 縦方向中央：justify-content: center（高さ指定必要）
  • 完璧な中央：両方を組み合わせ

軸の理解

  • row：主軸=横、交差軸=縦
  • column：主軸=縦、交差軸=横
  • justify-content：主軸方向の配置
  • align-items：交差軸方向の配置

実用的な活用シーン

縦並びが効果的な場面

  • スマホ向けレスポンシブデザイン
  • 入力フォームのレイアウト
  • ナビゲーションメニュー（サイドバー）
  • カードのスタック表示
  • ページ全体の構造（ヘッダー、メイン、フッター）

モダンな開発のコツ

  • gapプロパティで間隔調整
  • flex: 1で伸縮制御
  • レスポンシブでの方向切り替え
  • アクセシビリティへの配慮

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました