CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Flexbox縦並び

Web APP CSS
スポンサーリンク

Flexbox 縦並びを理解すると「縦方向レイアウト」が一気に整理される

Flexbox は横並びだけじゃなく、縦方向のレイアウト（縦積み・上下の余白調整・フッターを下に押し下げる）にもめちゃくちゃ強いです。
flex-direction: column; を使いこなすと、「縦に並べる」「上寄せ・中央寄せ・下寄せ」「余白を押し広げる」が直感的に書けるようになります。

CSS と Tailwind CSS の両方で、縦並びの基本〜よく使うパターンまで丁寧に解説します。

Flexbox を「縦方向モード」にする基本

親に display:flex ＋ flex-direction:column を書く

.column {
  display: flex;
  flex-direction: column;
}
CSS
<div class="column">
  <div>上のブロック</div>
  <div>真ん中のブロック</div>
  <div>下のブロック</div>
</div>
HTML

これで、子要素は 縦に積み上がるレイアウト になります。

Tailwind 版の基本

<div class="flex flex-col">
  <div>上のブロック</div>
  <div>真ん中のブロック</div>
  <div>下のブロック</div>
</div>
HTML

flex が display:flex、flex-col が flex-direction: column に対応しています。

縦並びで「上寄せ・中央寄せ・下寄せ」をコントロールする

縦並びのときの軸の考え方が超重要

flex-direction: column; にすると、
メイン軸（main axis）が「縦方向」になります。

その結果、

  • justify-content → 縦方向の揃え方
  • align-items → 横方向の揃え方

に役割が変わります。

ここを理解しているかどうかで、Flexbox の気持ちよさが変わります。

上寄せ（デフォルト）

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 初期値なので省略可 */
}
CSS

Tailwind

<div class="flex flex-col">
  ...
</div>
HTML

特に何も書かないと、上から順に積まれていきます。

縦方向の中央寄せ

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
CSS
<div class="column" style="height: 300px; background:#f3f4f6;">
  <div>中央に来るボックス</div>
</div>
HTML

Tailwind

<div class="flex flex-col justify-center h-72 bg-gray-100">
  <div class="bg-white px-4 py-2 rounded shadow">中央に来るボックス</div>
</div>
HTML

親に高さ（height）がないと「どこに対して中央か」が決まらないので、
h-72 などで高さを決めるのがポイントです。

下寄せ（フッターを下に押し付けるイメージ）

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
CSS
<div class="column" style="height: 300px; background:#f3f4f6;">
  <div>下に来るボックス</div>
</div>
HTML

Tailwind

<div class="flex flex-col justify-end h-72 bg-gray-100">
  <div class="bg-white px-4 py-2 rounded shadow">下に来るボックス</div>
</div>
HTML

「上・真ん中・下」に要素を配置する（よくあるレイアウト）

真ん中の要素に余白を押し付けるテクニック

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  /* 上部 */
}
.main {
  flex: 1; /* ここが余白を吸収する */
}
.footer {
  /* 下部 */
}
CSS
<div class="layout">
  <header class="header">ヘッダー</header>
  <main class="main">メインコンテンツ</main>
  <footer class="footer">フッター</footer>
</div>
HTML

Tailwind 版

<div class="flex flex-col min-h-screen">
  <header class="bg-gray-800 text-white p-4">ヘッダー</header>
  <main class="flex-1 bg-gray-50 p-4">メインコンテンツ</main>
  <footer class="bg-gray-200 p-4">フッター</footer>
</div>
HTML

flex-1 が「余った高さを全部ここに押し込む」という意味になり、
結果としてフッターが下に張り付いたレイアウトになります。

縦並びで「横方向の揃え方」を決める

align-items で横方向の揃え方を制御

flex-direction: column; のとき、
align-items は「横方向」の揃え方になります。

よく使うのはこの3つ。

flex-start → 左寄せ
center → 中央寄せ
flex-end → 右寄せ

横方向の中央揃え（縦に積んだ要素を真ん中に寄せる）

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
CSS
<div class="column">
  <button>ボタン1</button>
  <button>ボタン2</button>
</div>
HTML

Tailwind

<div class="flex flex-col items-center gap-2">
  <button class="px-4 py-2 bg-blue-600 text-white rounded">ボタン1</button>
  <button class="px-4 py-2 bg-gray-200 rounded">ボタン2</button>
</div>
HTML

右寄せ（縦に並んだボタンを右端に寄せる）

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
CSS

Tailwind

<div class="flex flex-col items-end gap-2">
  <button class="px-4 py-2 bg-blue-600 text-white rounded">保存</button>
  <button class="px-4 py-2 bg-gray-200 rounded">キャンセル</button>
</div>
HTML

縦並びの間隔をきれいに揃える

gap を使うと「上下の余白」が一発で揃う

.column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
CSS
<div class="column">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
</div>
HTML

Tailwind

<div class="flex flex-col gap-3">
  <div class="p-3 bg-gray-100 rounded">項目1</div>
  <div class="p-3 bg-gray-100 rounded">項目2</div>
  <div class="p-3 bg-gray-100 rounded">項目3</div>
</div>
HTML

margin-bottom を1つずつ付けるより、
gap でまとめて管理した方が圧倒的に楽でミスも減ります。

よく使う「縦並びテンプレート」

フォームのラベル＋入力欄を縦に揃える

CSS

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
CSS

HTML

<div class="field">
  <label>メールアドレス</label>
  <input type="email">
</div>
HTML

Tailwind

<div class="flex flex-col gap-1">
  <label class="text-sm text-gray-700">メールアドレス</label>
  <input class="border border-gray-300 rounded px-3 py-2">
</div>
HTML

カード内で「タイトル → テキスト → ボタン」を縦に並べる

Tailwind

<div class="flex flex-col gap-3 p-4 bg-white rounded-lg shadow">
  <h3 class="text-lg font-semibold">タイトル</h3>
  <p class="text-sm text-gray-600">
    説明テキストがここに入ります。複数行になってもOKです。
  </p>
  <button class="self-start px-3 py-1.5 bg-blue-600 text-white text-sm rounded">
    詳細を見る
  </button>
</div>
HTML

ここでは flex flex-col で縦並び、gap-3 で上下の余白を揃え、
self-start でボタンだけ左寄せにしています（これも Flex のおいしいところ）。

Flexbox 縦並びで一番大事な「軸の切り替え」の感覚

flex-direction: row;（横並び）のとき
メイン軸（横） → justify-content
交差軸（縦） → align-items

flex-direction: column;（縦並び）のとき
メイン軸（縦） → justify-content
交差軸（横） → align-items

この「どっちがどっちの軸か」を意識できるようになると、
レイアウトで迷う時間が一気に減ります。

スポンサーリンク
タイトルとURLをコピーしました