CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － align-items全パターン

Web APP CSS
スポンサーリンク

align-items を理解すると「縦方向の揃え」が一気に気持ちよくなる

align-items は Flexbox の中で、「交差軸（メイン軸と直角の方向）の揃え方」を決めるプロパティです。
横並びなら「縦方向の揃え」、縦並びなら「横方向の揃え」を担当します。

ここでは、全パターンを CSS と Tailwind CSS 両方で、実際の見え方と一緒に整理していきます。

前提：align-items が効く方向をちゃんと理解する

横並び（flex-direction: row）の場合

メイン軸：横
交差軸：縦

このとき align-items は「縦方向の揃え方」を決めます。
つまり、高さの違う要素をどう揃えるかです。

.container {
  display: flex;
  flex-direction: row; /* 初期値 */
}
CSS

Tailwind なら

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

縦並び（flex-direction: column）の場合

メイン軸：縦
交差軸：横

このとき align-items は「横方向の揃え方」を決めます。
つまり、縦に積んだ要素を左寄せ・中央寄せ・右寄せにする役割になります。

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

Tailwind なら

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

パターン1：stretch（デフォルト・高さを伸ばして揃える）

意味と使いどころ

align-items: stretch; は初期値で、
子要素の高さが指定されていない場合、親の高さに合わせて伸びます。

CSS

.container {
  display: flex;
  align-items: stretch; /* 初期値なので省略されがち */
}
CSS
<div class="container" style="height: 120px; background:#e5e7eb;">
  <div style="background:#bfdbfe;">A</div>
  <div style="background:#93c5fd;">B</div>
  <div style="background:#60a5fa;">C</div>
</div>
HTML

Tailwind

<div class="flex items-stretch h-32 bg-gray-200">
  <div class="bg-blue-200">A</div>
  <div class="bg-blue-300">B</div>
  <div class="bg-blue-400">C</div>
</div>
HTML

深掘りポイント

stretch は「高さを揃えたいカードレイアウト」などで自然に効きます。
ただし、子要素に height が指定されていると伸びません。
「カードの高さを揃えたいのに揃わない」ときは、
子要素の高さ指定を疑うといいです。

パターン2：flex-start（上揃え）

意味と使いどころ

横並びのとき、子要素の上端を揃える配置です。
高さの違う要素を「上に揃えたい」場面で使います。

CSS

.container {
  display: flex;
  align-items: flex-start;
}
CSS
<div class="container" style="height: 120px; background:#e5e7eb;">
  <div style="height:40px; background:#bfdbfe;">A</div>
  <div style="height:80px; background:#93c5fd;">B</div>
  <div style="height:60px; background:#60a5fa;">C</div>
</div>
HTML

Tailwind

<div class="flex items-start h-32 bg-gray-200">
  <div class="h-10 bg-blue-200">A</div>
  <div class="h-20 bg-blue-300">B</div>
  <div class="h-16 bg-blue-400">C</div>
</div>
HTML

深掘りポイント

テキスト量が違うカードを横並びにしたとき、
「上のラインを揃えたい」ことが多いです。
そのときは items-start が素直な選択になります。

パターン3：center（縦中央揃え）

意味と使いどころ

横並びのとき、子要素の縦方向の中心を揃える配置です。
アイコン＋テキスト、ボタン群、ラベル＋入力欄など、
「高さが違うけど真ん中で揃えたい」場面で頻出します。

CSS

.container {
  display: flex;
  align-items: center;
}
CSS
<div class="container" style="height: 80px; background:#e5e7eb;">
  <div style="height:40px; background:#bfdbfe;">A</div>
  <div style="height:60px; background:#93c5fd;">B</div>
</div>
HTML

Tailwind

<div class="flex items-center h-20 bg-gray-200">
  <div class="h-10 bg-blue-200">A</div>
  <div class="h-16 bg-blue-300">B</div>
</div>
HTML

深掘りポイント

items-center は実務で最もよく使う align-items です。
特に「アイコン＋テキストをきれいに並べたい」ときは、
flex items-center gap-* がほぼテンプレになります。

<div class="flex items-center gap-2">
  <span class="w-5 h-5 bg-blue-500 rounded-full"></span>
  <span>通知メッセージ</span>
</div>
HTML

パターン4：flex-end（下揃え）

意味と使いどころ

横並びのとき、子要素の下端を揃える配置です。
高さの違う要素を「下のラインで揃えたい」場面で使います。

CSS

.container {
  display: flex;
  align-items: flex-end;
}
CSS
<div class="container" style="height: 120px; background:#e5e7eb;">
  <div style="height:40px; background:#bfdbfe;">A</div>
  <div style="height:80px; background:#93c5fd;">B</div>
  <div style="height:60px; background:#60a5fa;">C</div>
</div>
HTML

Tailwind

<div class="flex items-end h-32 bg-gray-200">
  <div class="h-10 bg-blue-200">A</div>
  <div class="h-20 bg-blue-300">B</div>
  <div class="h-16 bg-blue-400">C</div>
</div>
HTML

深掘りポイント

グラフの棒、価格表示、ボタンの下端を揃えたいときなど、
「下のラインを揃える」ことで視線を安定させたい UI に向いています。

パターン5：baseline（文字のベースラインで揃える）

意味と使いどころ

子要素の テキストのベースライン（文字が乗る線） を揃えます。
テキストサイズが違う要素を横並びにしたときに、
「文字の下のラインを揃えたい」場面で使います。

CSS

.container {
  display: flex;
  align-items: baseline;
}
CSS
<div class="container" style="background:#e5e7eb;">
  <div style="font-size:14px; background:#bfdbfe;">小さい文字</div>
  <div style="font-size:24px; background:#93c5fd;">大きい文字</div>
</div>
HTML

Tailwind

<div class="flex items-baseline bg-gray-200 gap-3">
  <div class="text-sm bg-blue-200">小さい文字</div>
  <div class="text-2xl bg-blue-300">大きい文字</div>
</div>
HTML

深掘りポイント

価格表示などでよく使います。

<div class="flex items-baseline gap-1">
  <span class="text-sm text-gray-500">¥</span>
  <span class="text-3xl font-bold">12,800</span>
  <span class="text-xs text-gray-500">税込</span>
</div>
HTML

数字の下のラインが揃うことで、
視線が安定し、読みやすくなります。

縦並び（flex-col）のときの align-items

横方向の揃え方を決める

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

中央寄せの例：

<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

右寄せの例：

<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

ここでも「今、メイン軸はどっち向きか？」を意識できると、
justify-content と align-items の役割が迷子になりません。

実践テンプレート：よく使う align-items パターン

アイコン＋テキストをきれいに横並び

<div class="flex items-center gap-2">
  <span class="w-5 h-5 bg-green-500 rounded-full"></span>
  <span class="text-sm text-gray-800">成功しました</span>
</div>
HTML

高さの違うカードを上揃えで横並び

<div class="flex items-start gap-4">
  <div class="w-40 p-4 bg-white rounded shadow">
    <p>短いテキスト</p>
  </div>
  <div class="w-40 p-4 bg-white rounded shadow">
    <p>少し長めのテキストが入ります。複数行になることもあります。</p>
  </div>
</div>
HTML

価格表示を baseline で揃える

<div class="flex items-baseline gap-1">
  <span class="text-sm text-gray-500">¥</span>
  <span class="text-3xl font-bold">12,800</span>
  <span class="text-xs text-gray-500">税込</span>
</div>
HTML

まとめ：align-items を選ぶときの感覚

stretch
→ 高さを揃えたいカードなど（初期値）

flex-start
→ 上のラインを揃えたいとき

center
→ 高さが違う要素を真ん中で揃えたいとき（実務で一番よく使う）

flex-end
→ 下のラインを揃えたいとき（グラフ・価格など）

baseline
→ 文字の下のラインを揃えたいとき（価格表示・見出し＋サブテキスト）

「どのラインを揃えたいのか？」を一瞬だけ意識して、
それに合う align-items を選ぶ感覚を育てていくと、
レイアウトの“気持ちよさ”が一段上がります。

もし「このコンポーネント、どの align-items がしっくりくるか迷ってる」という具体的な UI があれば、そのコードを一緒に見ながらベストな揃え方を決めていこう。

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