MENU
  1. ホーム
  2. CSS
  3. 【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い

【CSS】align-itemsの使い方：縦の中央揃えからjustify-contentとの違い

CSS
css-align-items

FlexboxやGridで要素の交差軸（主に縦方向）の配置を決定するalign-itemsは、思い通りのレイアウトを組むために必要不可欠なプロパティです。

本記事では、基本となる値の使い方、混同しやすいjustify-contentやalign-contentとの違い、指定が効かない時の解決策まで解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

align-itemsとは：基本と他プロパティとの違い

FlexboxやGridレイアウトを学ぶ上で、重要なのが「要素の配置（アライメント）」です。

align-itemsを一言で説明すると、コンテナ内のアイテムを「交差軸（通常は縦方向）」に沿ってどのように揃えるかを指定するプロパティです。

指定できる値の挙動を理解していないと、意図しないレイアウトの崩れや「なぜか中央に寄らない」という沼にハマります。

ここでは、align-itemsの基本、似た名前を持つjustify-contentやalign-contentとの違いと使い分けを解説します。

align-itemsとは：基本と他プロパティとの違い
  • 交差軸の配置を決める役割と初期値
  • justify-contentとの違いと使い分け
  • align-contentとの違い

交差軸の配置を決める役割と初期値

Flexboxにおけるalign-itemsの役割は、「交差軸」での配置です。

通常の横並び（flex-direction: row;）の場合、交差軸は「縦方向（上下）」になります。

ボタンやカードなどを横並びにする際、各要素の本来の高さを維持したい場合は、親要素にalign-items: flex-start;（上揃え）やalign-items: center;（中央揃え）を明示的に指定して、初期値のstretchを解除するのがよいです。

⭕️ align-itemsの初期値はstretch！意図しない縦伸びに注意

❌ 初期値（stretch）
一番高い要素に合わせて伸びる

テキスト
テキストが
多くて
背が高い
テキスト

⭕️ align-items: center
各自の高さを保って縦中央揃え

テキスト
テキストが
多くて
背が高い
テキスト
/* ❌ 初心者が戸惑う挙動：指定しないと勝手に伸びる */
.flex-stretch {
  display: flex;
  align-items: stretch; /* 💡 書かなくてもこれがデフォルト（初期値） */
  gap: 10px;
}

/* ⭕️ 高さを揃えたくない場合は明示的に指定する */
.flex-center {
  display: flex;
  align-items: center; /* 💡 要素本来の高さを維持して、縦の中央に配置 */
  gap: 10px;
}
HTMLコード表示
<div class="align-tech-wrapper">
  
  <p class="align-caption">⭕️ align-itemsの初期値はstretch！意図しない縦伸びに注意</p>

  <div class="align-demo-area" style="gap: 30px; align-items: flex-start;">
    
    <div class="align-box-wrapper">
      <p class="align-label">❌ 初期値（stretch）<br><small>一番高い要素に合わせて伸びる</small></p>
      
      <div class="align-flex-container is-stretch">
        <div class="align-item">テキスト</div>
        <div class="align-item">テキストが<br>多くて<br>背が高い</div>
        <div class="align-item">テキスト</div>
      </div>
    </div>

    <div class="align-box-wrapper">
      <p class="align-label" style="color:#0d6efd;">⭕️ align-items: center<br><small>各自の高さを保って縦中央揃え</small></p>
      
      <div class="align-flex-container is-center">
        <div class="align-item">テキスト</div>
        <div class="align-item">テキストが<br>多くて<br>背が高い</div>
        <div class="align-item">テキスト</div>
      </div>
    </div>

  </div>

  <div class="align-code">
    /* ❌ 初心者が戸惑う挙動：指定しないと勝手に伸びる */<br>
    <span class="hl-blue">.flex-stretch</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: stretch;</span> /* 💡 書かなくてもこれがデフォルト（初期値） */<br>
      <span class="hl-green">gap: 10px;</span><br>
    }<br><br>

    /* ⭕️ 高さを揃えたくない場合は明示的に指定する */<br>
    <span class="hl-blue">.flex-center</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 要素本来の高さを維持して、縦の中央に配置 */<br>
      <span class="hl-green">gap: 10px;</span><br>
    }
  </div>

</div>
CSSコード表示
.align-tech-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.align-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.align-demo-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.align-box-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 250px;
}

.align-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* 共通のFlexコンテナ（枠をわかりやすくする） */
.align-flex-container {
  display: flex;
  gap: 10px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 4px;
  padding: 10px;
}

/* 💡 アイテムの共通設定 */
.align-item {
  background-color: #ffc107;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ❌ 初期値（stretch） */
.is-stretch {
  align-items: stretch; /* 記述しなくてもこれになります */
}

/* ⭕️ 中央揃え（center） */
.is-center {
  align-items: center; /* 縦の中央で揃い、それぞれ元の高さをキープする */
}

/* コードブロック装飾 */
.align-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

justify-contentとの違いと使い分け

Flexboxを学ぶ上での混乱ポイントが、「align-itemsとjustify-content、どっちがどっちだっけ？」という問題です。

この2つの違いは、シンプルに「軸」で暗記します。

  • justify-content＝主軸（メイン）の配置。
    通常の横並びなら「左右（水平）」の動き。
  • align-items＝交差軸（クロス）の配置。
    通常の横並びなら「上下（垂直）」の動き。
    要素をコンテナの「上下左右の中央」に配置する際は、親要素にdisplay: flex; justify-content: center; align-items: center;を3点セットで記述します。

⭕️ justify(主軸/横) と align(交差軸/縦) の役割分担を理解する

justify-content: center
主軸（左右）の中央

BOX

align-items: center
交差軸（上下）の中央

BOX

両方指定（最強コンボ）
上下左右のど真ん中

BOX
/* 💡 主軸（横方向）だけ中央に寄せる */
.box-justify {
  display: flex;
  justify-content: center; /* 💡 左右の中央 */
}

/* 💡 交差軸（縦方向）だけ中央に寄せる */
.box-align {
  display: flex;
  align-items: center; /* 💡 上下の中央 */
}

/* ⭕️ 要素を親の「完全など真ん中」に配置する黄金の3行 */
.box-perfect-center {
  display: flex;
  justify-content: center; /* 💡 左右ど真ん中 */
  align-items: center; /* 💡 上下ど真ん中 */
}
HTMLコード表示
<div class="align-tech-wrapper">
  
  <p class="align-caption">⭕️ justify(主軸/横) と align(交差軸/縦) の役割分担を理解する</p>

  <div class="align-demo-area" style="gap: 20px; align-items: stretch;">
    
    <div class="align-box-wrapper" style="flex: 1; min-width: 140px;">
      <p class="align-label">justify-content: center<br><small>主軸（左右）の中央</small></p>
      <div class="align-perfect-container is-justify-only" style="margin-top: auto;">
        <div class="align-perfect-item">BOX</div>
      </div>
    </div>

    <div class="align-box-wrapper" style="flex: 1; min-width: 140px;">
      <p class="align-label">align-items: center<br><small>交差軸（上下）の中央</small></p>
      <div class="align-perfect-container is-align-only" style="margin-top: auto;">
        <div class="align-perfect-item">BOX</div>
      </div>
    </div>

    <div class="align-box-wrapper" style="flex: 1; min-width: 140px;">
      <p class="align-label" style="color:#0d6efd;">両方指定（最強コンボ）<br><small>上下左右のど真ん中</small></p>
      <div class="align-perfect-container is-both" style="margin-top: auto;">
        <div class="align-perfect-item">BOX</div>
      </div>
    </div>

  </div>

  <div class="align-code">
    /* 💡 主軸（横方向）だけ中央に寄せる */<br>
    <span class="hl-blue">.box-justify</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">justify-content: center;</span> /* 💡 左右の中央 */<br>
    }<br><br>

    /* 💡 交差軸（縦方向）だけ中央に寄せる */<br>
    <span class="hl-blue">.box-align</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 上下の中央 */<br>
    }<br><br>

    /* ⭕️ 要素を親の「完全など真ん中」に配置する黄金の3行 */<br>
    <span class="hl-blue">.box-perfect-center</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">justify-content: center;</span> /* 💡 左右ど真ん中 */<br>
      <span class="hl-red">align-items: center;</span> /* 💡 上下ど真ん中 */<br>
    }
  </div>

</div>
CSSコード表示
/* 共通の親コンテナ（高さを設定して縦の動きを見やすくする） */
.align-perfect-container {
  display: flex;
  width: 100%;
  height: 120px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 4px;
}

.align-perfect-item {
  background-color: #0d6efd;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 4px;
}

/* 💡 justify のみ（左右中央、上張り付き） */
.is-justify-only {
  justify-content: center;
  align-items: flex-start; /* 縦伸びを防ぐため上揃え */
}

/* 💡 align のみ（上下中央、左張り付き） */
.is-align-only {
  justify-content: flex-start;
  align-items: center;
}

/* ⭕️ 両方（完全中央） */
.is-both {
  justify-content: center;
  align-items: center;
  border-color: #0d6efd;
}

様々な要素の中央寄せを詳しく知りたい人は「【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策」を一読ください。

【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

align-contentとの違い

もう一つが「align-itemsとalign-contentの違い」です。

この2つの使い分けは「行数」で判断します。

  • align-items
    1行1行に対する縦の配置。（各行の中で、要素が縦のどこに位置するか。）
  • align-content
    複数行の「行の束全体」に対する縦の配置。（コンテナの余った縦スペースに対して、行全体をどう寄せるか。）
    「折り返しのない（単一行の）横並び」であれば、無条件でalign-itemsを使えばよいです。

⭕️ align-content は「複数行（flex-wrap: wrap）」の時にしか発動しない

align-items: center
「各行」の中で縦中央に揃う

A
B
C
D

align-content: center
「行の束全体」がコンテナの縦中央に寄る

A
B
C
D
/* 💡 前提条件：どちらも「flex-wrap: wrap;」で複数行になっていること */
.container {
  display: flex;
  flex-wrap: wrap;
  height: 220px; /* 💡 縦にたっぷり余白がないと違いがわからない */
}

/* 💡 align-items の場合：各行のスペースが等分され、その中で中央に寄る */
.use-items {
  align-items: center;
}

/* ⭕️ 複数行の隙間を無くして、全体を縦の「ど真ん中」にギュッと寄せる */
.use-content {
  align-content: center;
}
HTMLコード表示
<div class="align-tech-wrapper">
  
  <p class="align-caption">⭕️ align-content は「複数行（flex-wrap: wrap）」の時にしか発動しない</p>

  <div class="align-demo-area" style="gap: 30px; align-items: stretch;">
    
    <div class="align-box-wrapper" style="flex: 1; min-width: 200px;">
      <p class="align-label">align-items: center<br><small>「各行」の中で縦中央に揃う</small></p>
      
      <div class="align-wrap-container is-items-center" style="margin-top: auto;">
        <div class="align-wrap-item">A</div>
        <div class="align-wrap-item">B</div>
        <div class="align-wrap-item">C</div>
        <div class="align-wrap-item">D</div>
      </div>
    </div>

    <div class="align-box-wrapper" style="flex: 1; min-width: 200px;">
      <p class="align-label" style="color:#0d6efd;">align-content: center<br><small>「行の束全体」がコンテナの縦中央に寄る</small></p>
      
      <div class="align-wrap-container is-content-center" style="margin-top: auto;">
        <div class="align-wrap-item">A</div>
        <div class="align-wrap-item">B</div>
        <div class="align-wrap-item">C</div>
        <div class="align-wrap-item">D</div>
      </div>
    </div>

  </div>

  <div class="align-code">
    /* 💡 前提条件：どちらも「flex-wrap: wrap;」で複数行になっていること */<br>
    <span class="hl-blue">.container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">flex-wrap: wrap;</span><br>
      <span class="hl-green">height: 220px;</span> /* 💡 縦にたっぷり余白がないと違いがわからない */<br>
    }<br><br>

    /* 💡 align-items の場合：各行のスペースが等分され、その中で中央に寄る */<br>
    <span class="hl-blue">.use-items</span> {<br>
      <span class="hl-red">align-items: center;</span><br>
    }<br><br>

    /* ⭕️ 複数行の隙間を無くして、全体を縦の「ど真ん中」にギュッと寄せる */<br>
    <span class="hl-blue">.use-content</span> {<br>
      <span class="hl-red">align-content: center;</span><br>
    }
  </div>

</div>
CSSコード表示
/* 複数行デモ用の親コンテナ */
.align-wrap-container {
  display: flex;
  flex-wrap: wrap; /* 💡 複数行にする必須条件 */
  width: 100%;
  height: 220px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 4px;
  padding: 10px; /* 内側に少し余白を設ける */
  box-sizing: border-box;
}

/* 子要素（2個で折り返すように幅を計算） */
.align-wrap-item {
  width: 46%; 
  margin: 2%;
  background-color: #198754;
  color: white;
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 💡 align-items の場合 */
/* コンテナの高さが2行に等分され、それぞれの行の中で中央配置される（行間に大きな隙間ができる） */
.is-items-center {
  align-items: center;
}

/* 💡 align-content の場合 */
/* 行と行の隙間がなくなり、「行の束全体」がコンテナの縦の中央に配置される */
.is-content-center {
  align-content: center;
  border-color: #0d6efd;
}

align-itemsで使える値と配置

align-itemsプロパティには、実務で使用される「5つの代表的な値」が存在します。

これらを使いこなすことで、要素を中央に配置したり、上端や下端に揃えたり、文字のベースラインに合わせて整列させたりすることがCSSの記述1行で可能になります。

ここでは、各値の挙動とよく間違える指定方法などを解説します。

align-itemsで使える値と配置
  • 中央寄せと上揃え・下揃え
  • 要素の高さを揃える・文字のベースライン揃え

中央寄せと上揃え・下揃え

Flexboxを用いたレイアウトにおいて、使用頻度が高いのが「中央・上・下」の配置です。

縦方向の中央寄せにはalign-items: center;を使用します。

また、コンテナの上端に揃える場合はalign-items: flex-start;、下端に揃える場合はalign-items: flex-end;を使用します。

「コンテナ全体はcenterで中央揃えにしたいけど、1つの要素だけは一番下に配置したい」というようなイレギュラーなデザインに直面した場合、HTMLの構造を複雑にする必要はありません。

親要素にalign-items: center;を指定した上で、下に落としたい特定の子要素だけにalign-self: flex-end;を個別に指定します。

これにより、全体のルールを壊すことなく、特定のアイテムだけの配置を上書きできるのがFlexboxの強みです。

⭕️ Flexboxでの上下配置は top/bottom ではなく flex-start/flex-end を使う

flex-start
（上端に揃う）

Item

center
（中央に揃う）

Item

flex-end
（下端に揃う）

Item
.flex-container {
  display: flex;
  height: 150px; /* 💡 縦の動きを見るために高さを確保 */
}

/* ❌ align-items: top; や bottom; と書いてしまう */

/* ⭕️ 正しい値（start, center, end）を使う */
.item-start {
  align-items: flex-start; /* 💡 上揃え */
}
.item-center {
  align-items: center; /* 💡 中央揃え */
}
.item-end {
  align-items: flex-end; /* 💡 下揃え */
}
HTMLコード表示
<div class="align-val-wrapper">
  
  <p class="align-caption">⭕️ Flexboxでの上下配置は top/bottom ではなく flex-start/flex-end を使う</p>

  <div class="align-demo-area" style="gap: 20px;">
    
    <div class="align-box-wrapper">
      <p class="align-label">flex-start<br><small>（上端に揃う）</small></p>
      <div class="align-val-container is-start">
        <div class="align-val-item">Item</div>
      </div>
    </div>

    <div class="align-box-wrapper">
      <p class="align-label" style="color:#0d6efd;">center<br><small>（中央に揃う）</small></p>
      <div class="align-val-container is-center-val">
        <div class="align-val-item">Item</div>
      </div>
    </div>

    <div class="align-box-wrapper">
      <p class="align-label" style="color:#dc3545;">flex-end<br><small>（下端に揃う）</small></p>
      <div class="align-val-container is-end">
        <div class="align-val-item">Item</div>
      </div>
    </div>

  </div>

  <div class="align-code">
    <span class="hl-blue">.flex-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">height: 150px;</span> /* 💡 縦の動きを見るために高さを確保 */<br>
    }<br><br>

    /* ❌ align-items: top; や bottom; と書いてしまう */<br><br>

    /* ⭕️ 正しい値（start, center, end）を使う */<br>
    <span class="hl-blue">.item-start</span> {<br>
      <span class="hl-red">align-items: flex-start;</span> /* 💡 上揃え */<br>
    }<br>
    <span class="hl-blue">.item-center</span> {<br>
      <span class="hl-red">align-items: center;</span> /* 💡 中央揃え */<br>
    }<br>
    <span class="hl-blue">.item-end</span> {<br>
      <span class="hl-red">align-items: flex-end;</span> /* 💡 下揃え */<br>
    }
  </div>

</div>
CSSコード表示
.align-val-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.align-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.align-demo-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.align-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}

.align-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
}

/* 共通コンテナ */
.align-val-container {
  display: flex;
  justify-content: center; /* 横方向は常に中央にしておく */
  width: 100%;
  height: 120px; /* 縦の動きを見やすくするための高さ */
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 4px;
}

/* 共通アイテム */
.align-val-item {
  background-color: #ffc107;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  /* アイテム自体の高さは固定しない */
}

/* 💡 個別の配置設定 */
.is-start {
  align-items: flex-start;
}

.is-center-val {
  align-items: center;
  border-color: #0d6efd;
}

.is-center-val .align-val-item {
  background-color: #0d6efd;
  color: white;
}

.is-end {
  align-items: flex-end;
  border-color: #dc3545;
}

.is-end .align-val-item {
  background-color: #dc3545;
  color: white;
}

/* コードブロック装飾 */
.align-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

要素の高さを揃える・文字のベースライン揃え

centerやflex-start以外にも、デザインの現場で「かゆいところに手が届く」値が2つあります。

1つ目は、align-items: stretch;です。

親コンテナの高さ、または背の高い兄弟要素に合わせて、他の要素も同じ高さまで「引き伸ばす」役割を持ちます。

2つ目は、フォントサイズが異なるテキストを横に並べた際、文字の下端（ベースライン）を直線に揃えてくれる値align-items: baseline;です。

  • stretchの実務テクニック
    カードの高さをstretchで揃えた後、「中身のボタンだけは常にカードの一番下に配置したい」という要件が出ます。
    この場合、カード自体もdisplay: flex; flex-direction: column;にし、ボタンに対してmargin-top: auto;を指定するのがよいです。
  • baselineの実務テクニック
    「大きな見出し」と「小さな補足テキスト」を横並びにする際、align-items: center;やflex-end;を使うと、文字の基準線が微妙にズレて不格好になります。
    文字サイズの異なる要素が混在する場合は、align-items: baseline;を使いましょう。
    見出しと補足テキストのラインが揃い、洗練されたデザインになります。

⭕️ stretch で高さを揃え、baseline でタイポグラフィを美しく整える

align-items: stretch
一番高い要素に合わせて全体が伸びる

A
複数行の
テキスト
B
少ない
C
height固定

align-items: baseline
文字サイズが違っても「底のライン」が一直線に揃う

¥9,800
（税込 ¥10,780）
/* 💡 stretch：子要素に height の指定がなければ、一番高い要素に合わせて伸びる */
.container-stretch {
  display: flex;
  align-items: stretch; /* 💡 デフォルト値 */
}

/* ⭕️ 価格表記など、異なるフォントサイズを横に並べる場合の必須テクニック */
.container-baseline {
  display: flex;
  align-items: baseline; /* 💡 英語のノートの罫線のように、文字の底辺が揃う */
  background-color: #fff;
  padding: 15px;
}
HTMLコード表示
<div class="align-adv-wrapper">
  
  <p class="align-caption">⭕️ stretch で高さを揃え、baseline でタイポグラフィを美しく整える</p>

  <div class="align-demo-area" style="flex-direction: column; gap: 30px;">
    
    <div class="align-box-wrapper" style="max-width: 100%; width: 100%;">
      <p class="align-label">align-items: stretch<br><small>一番高い要素に合わせて全体が伸びる</small></p>
      
      <div class="align-stretch-container">
        <div class="align-stretch-item">A<br>複数行の<br>テキスト</div>
        <div class="align-stretch-item">B<br>少ない</div>
        <div class="align-stretch-item" style="height: 50px; background-color:#dc3545;">C<br>height固定</div>
      </div>
    </div>

    <div class="align-box-wrapper" style="max-width: 100%; width: 100%;">
      <p class="align-label" style="color:#0d6efd;">align-items: baseline<br><small>文字サイズが違っても「底のライン」が一直線に揃う</small></p>
      
      <div class="align-baseline-container">
        <div class="align-baseline-large">¥9,800</div>
        <div class="align-baseline-small">（税込 ¥10,780）</div>
      </div>
    </div>

  </div>

  <div class="align-code">
    /* 💡 stretch：子要素に height の指定がなければ、一番高い要素に合わせて伸びる */<br>
    <span class="hl-blue">.container-stretch</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: stretch;</span> /* 💡 デフォルト値 */<br>
    }<br><br>

    /* ⭕️ プロの鉄則：価格表記など、異なるフォントサイズを横に並べる場合の必須テクニック */<br>
    <span class="hl-blue">.container-baseline</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: baseline;</span> /* 💡 英語のノートの罫線のように、文字の底辺が揃う */<br>
      <span class="hl-green">background-color: #fff;</span><br>
      <span class="hl-green">padding: 15px;</span><br>
    }
  </div>

</div>
CSSコード表示
.align-adv-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* 💡 stretch デモ用 */
.align-stretch-container {
  display: flex;
  align-items: stretch; /* 💡 高さを揃える */
  gap: 15px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 4px;
  padding: 15px;
}

.align-stretch-item {
  background-color: #ffc107;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  flex: 1;
}

/* 💡 baseline デモ用 */
.align-baseline-container {
  display: flex;
  align-items: baseline; /* 💡 文字のベースラインで揃える */
  gap: 10px;
  background-color: #fff;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  padding: 20px;
  /* ベースラインがわかりやすいように擬似的に線を引く */
  position: relative;
}

.align-baseline-container::after {
  content: "";
  position: absolute;
  bottom: 25px; /* 文字の底辺あたりに赤いガイドラインを引く */
  left: 10px;
  right: 10px;
  border-bottom: 1px dashed rgba(220, 53, 69, 0.5);
  pointer-events: none;
}

.align-baseline-large {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  line-height: 1; /* ベースラインを正確にするため */
}

.align-baseline-small {
  font-size: 14px;
  font-weight: bold;
  color: #6c757d;
  line-height: 1;
}

FlexboxとGridレイアウトでの目的別配置方法

CSSで要素をレイアウトする際、Web制作においてFlexboxとGridは欠かせません。

しかし、同じ要素を揃えるという目的でも、親要素がdisplay: flex;なのか、display: grid;なのかによってalign-itemsプロパティの振る舞いや得意分野が異なります。

ここでは、各レイアウト手法における最適な配置と間違いやすいポイントについて解説します。

FlexboxとGridレイアウトでの目的別配置方法
  • Flexboxで上下中央や横並びの配置を整える
  • Gridでのアイテム配置（右寄せ・下寄せ・上下中央）
  • 右寄せ・左寄せをしたい場合はどうする？

Flexboxで上下中央や横並びの配置を整える

Flexboxは「1次元（横一列、または縦一列）」のレイアウトにおいて有益なツールです。

特定のdivの中で要素を縦方向に中央揃えにしたい場合、親要素にdisplay: flex;とalign-items: center;を指定するだけで上下中央が実現します。

また、リストの項目を横並びにしたい場合や要素を並べて配置したい場合も、Flexboxは活躍します。

例えば、異なる要素を水平に並べてかつ縦のラインを揃える場合は、display: flex;,align-items: center;,gap: 8px;の3点セットを使うことです。

旧来のmarginで余白を調整するのではなく、gapプロパティを使うことで、HTMLの構造に依存しない美しい横並びコンポーネントが完成します。

⭕️ Flexbox 黄金の3点セットで、縦ズレのない美しい横並びを作る

アイコン＋テキストの配置

💡 お知らせ：新しい機能が追加されました！

リストアイテムの横並び配置

  • ホーム
  • サービス概要
  • 会社情報
  • お問い合わせ
/* ⭕️ アイコンとテキストの横並び */
.icon-text-group {
  display: flex;
  align-items: center; /* 💡 縦方向のズレをなくし、ど真ん中で揃える！ */
  gap: 12px; /* 💡 余白は margin ではなく gap を使うのが現代の鉄則 */
}

/* ⭕️ リストの横並び */
.nav-list {
  display: flex;
  align-items: center; /* 💡 ここでも縦の中央を担保 */
  justify-content: space-around; /* 💡 横幅に対して均等に配置 */
}
HTMLコード表示
<div class="fb-layout-wrapper">
  
  <p class="fb-layout-caption">⭕️ Flexbox 黄金の3点セットで、縦ズレのない美しい横並びを作る</p>

  <div class="fb-demo-area">
    
    <div class="fb-demo-box">
      <p class="fb-demo-label">アイコン＋テキストの配置</p>
      
      <div class="fb-icon-text-group">
        <span class="fb-icon-dummy">💡</span>
        <span class="fb-text-dummy">お知らせ：新しい機能が追加されました！</span>
      </div>
    </div>

    <div class="fb-demo-box">
      <p class="fb-demo-label">リストアイテムの横並び配置</p>
      
      <ul class="fb-nav-list">
        <li class="fb-nav-item">ホーム</li>
        <li class="fb-nav-item">サービス概要</li>
        <li class="fb-nav-item">会社情報</li>
        <li class="fb-nav-item">お問い合わせ</li>
      </ul>
    </div>

  </div>

  <div class="fb-code-area">
    /* ⭕️ アイコンとテキストの横並び */<br>
    <span class="hl-blue">.icon-text-group</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 縦方向のズレをなくし、ど真ん中で揃える！ */<br>
      <span class="hl-red">gap: 12px;</span> /* 💡 余白は margin ではなく gap を使うのが現代の鉄則 */<br>
    }<br><br>

    /* ⭕️ リストの横並び */<br>
    <span class="hl-blue">.nav-list</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 ここでも縦の中央を担保 */<br>
      <span class="hl-green">justify-content: space-around;</span> /* 💡 横幅に対して均等に配置 */<br>
    }
  </div>

</div>
CSSコード表示
.fb-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.fb-layout-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #198754;
  text-align: center;
}

.fb-demo-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-color: #e9ecef;
  padding: 40px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.fb-demo-box {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.fb-demo-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px dashed #e9ecef;
  padding-bottom: 10px;
}

/* ＝⭕️ 実践コード1：アイコンとテキストの横並び＝ */
.fb-icon-text-group {
  display: flex; /* 横並びにする */
  align-items: center; /* 💡 縦方向（上下）をど真ん中で揃える！ */
  gap: 12px; /* 💡 余白はmarginではなくgapで管理する */
  background-color: #e7f1ff;
  padding: 15px 20px;
  border-radius: 6px;
  border-left: 5px solid #0d6efd;
}

.fb-icon-dummy {
  font-size: 24px;
  line-height: 1;
}

.fb-text-dummy {
  font-size: 15px;
  font-weight: bold;
  color: #0d6efd;
}

/* ＝⭕️ 実践コード2：リストの横並び＝ */
.fb-nav-list {
  display: flex; /* リストを横並びにする */
  align-items: center; /* 💡 縦方向の中央を担保 */
  justify-content: space-around; /* 均等に配置 */
  list-style: none; /* デフォルトの・を消す */
  margin: 0;
  padding: 15px;
  background-color: #343a40;
  border-radius: 6px;
}

.fb-nav-item {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

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

.fb-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

Flexboxの使い方を詳しく知りたい人は「【CSS】flexの使い方：justify-content・align-items・gap」を一読ください。

【CSS】flexの使い方：justify-content・align-items・gap

Gridでのアイテム配置（右寄せ・下寄せ・上下中央）

Flexboxが「1次元」なら、Gridは「2次元（縦横のマス目）」のレイアウトを得意とします。

Gridレイアウトにおいてもalign-itemsプロパティは存在し、マスの縦方向の配置を決定します。

Gridのマスの中で上端に寄せるならstart、下端に寄せるならend、マスの中央に配置するならcenterを使用します。

Gridのセルの中で、要素を上下左右の中央に配置したい場合、align-items: center;とjustify-items: center;を2行書く必要はありません。

これらを一括で指定できるショートハンドプロパティであるplace-items: center;を使います。

⭕️ Gridレイアウトでは、セルの「縦の配置」を align-items で制御する

start
(上端)
place-items
(完全中央)
end
(下端)
/* 💡 1列目：縦の上端に寄せる */
.align-start {
  align-items: start;
}

/* ⭕️ 上下左右の完全など真ん中（Grid専用） */
.place-center {
  place-items: center; /* 💡 align-items と justify-items の最強合体技 */
}

/* 💡 3列目：縦の下端に寄せる */
.align-end {
  align-items: end;
}
HTMLコード表示
<div class="gr-layout-wrapper">
  
  <p class="gr-layout-caption">⭕️ Gridレイアウトでは、セルの「縦の配置」を align-items で制御する</p>

  <div class="gr-demo-area">
    
    <div class="gr-grid-container">
      
      <div class="gr-grid-cell is-align-start">
        <div class="gr-item-box">start<br>(上端)</div>
      </div>
      
      <div class="gr-grid-cell is-place-center">
        <div class="gr-item-box is-highlight">place-items<br>(完全中央)</div>
      </div>
      
      <div class="gr-grid-cell is-align-end">
        <div class="gr-item-box">end<br>(下端)</div>
      </div>

    </div>

  </div>

  <div class="gr-code-area">
    /* 💡 1列目：縦の上端に寄せる */<br>
    <span class="hl-blue">.align-start</span> {<br>
      <span class="hl-red">align-items: start;</span><br>
    }<br><br>

    /* ⭕️ 上下左右の完全など真ん中（Grid専用） */<br>
    <span class="hl-blue">.place-center</span> {<br>
      <span class="hl-red">place-items: center;</span> /* 💡 align-items と justify-items の最強合体技 */<br>
    }<br><br>

    /* 💡 3列目：縦の下端に寄せる */<br>
    <span class="hl-blue">.align-end</span> {<br>
      <span class="hl-red">align-items: end;</span><br>
    }
  </div>

</div>
CSSコード表示
.gr-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.gr-layout-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #198754;
  text-align: center;
}

.gr-demo-area {
  background-color: #e9ecef;
  padding: 40px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

/* ＝⭕️ 実践コード：Gridコンテナの構築＝ */
.gr-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列を均等に分割 */
  gap: 20px;
  height: 250px; /* セル内の上下の動きを見せるため高さを大きく取る */
}

/* 各セルの共通装飾（枠線を引いてマスの広さを可視化） */
.gr-grid-cell {
  background-color: #fff;
  border: 2px dashed #ced4da;
  border-radius: 8px;
  padding: 10px;
  display: grid; /* 配置設定を際立たせるため、cell自体もGridにする */
}

/* 中に入るアイテム */
.gr-item-box {
  background-color: #6c757d;
  color: white;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
  font-size: 14px;
}

/* 強調用 */
.gr-item-box.is-highlight {
  background-color: #0d6efd;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* ＝💡 セル内の配置設定（Grid専用の書き方）＝ */
.is-align-start { align-items: start; }
.is-place-center { place-items: center; } /* 💡 合体技 */
.is-align-end { align-items: end; }

.gr-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

Gridの使い方を詳しく知りたい人は「【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ」を一読ください。

【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ

右寄せ・左寄せをしたい場合はどうする？

実務で要望が多いのが、ヘッダーなどで「ロゴは左寄せ、ナビゲーションメニューは右寄せ」という両端配置です。

これを実現する方法は以下の2つです。

  1. 親要素で制御する
    親のFlexコンテナにjustify-content: space-between;を指定し、左右の端に突き放す。
  2. 子要素の余白で突き放す
    右寄せにしたい要素に対して、margin-left: auto;を指定する。
    ※これが一番手軽で3つ以上の要素がある場合に特定のものだけ右に寄せることができるテクニックです。

⭕️ 要素を「左右」に寄せたい場合は align-items ではなく justify-content や margin を使う

鉄則1：justify-content: space-between;

鉄則2：右に寄せたい要素に margin-left: auto;

検索窓
/* ⭕️ 親要素で両端に突き放す（ヘッダーの定番） */
.header-between {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 💡 左右の端に配置する */
}

/* ⭕️ 特定の子要素だけを右に寄せる */
.login-btn {
  margin-left: auto; /* 💡 左側の余白を可能な限り取る ＝ 自分を右端に押しやる */
}
HTMLコード表示
<div class="rl-layout-wrapper">
  
  <p class="rl-layout-caption">⭕️ 要素を「左右」に寄せたい場合は align-items ではなく justify-content や margin を使う</p>

  <div class="rl-demo-area">
    
    <div class="rl-header-box">
      <p class="rl-header-label">鉄則1：justify-content: space-between;</p>
      
      <header class="rl-header is-space-between">
        <div class="rl-logo">LOGO</div>
        <nav class="rl-nav">
          <span class="rl-nav-link">MENU 1</span>
          <span class="rl-nav-link">MENU 2</span>
        </nav>
      </header>
    </div>

    <div class="rl-header-box">
      <p class="rl-header-label">鉄則2：右に寄せたい要素に margin-left: auto;</p>
      
      <header class="rl-header is-margin-auto">
        <div class="rl-logo">LOGO</div>
        <div class="rl-search">検索窓</div>
        <button class="rl-login-btn">ログイン</button>
      </header>
    </div>

  </div>

  <div class="rl-code-area">
    /* ⭕️ 親要素で両端に突き放す（ヘッダーの定番） */<br>
    <span class="hl-blue">.header-between</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">align-items: center;</span><br>
      <span class="hl-red">justify-content: space-between;</span> /* 💡 左右の端に配置する */<br>
    }<br><br>

    /* ⭕️ 特定の子要素だけを右に寄せる */<br>
    <span class="hl-blue">.login-btn</span> {<br>
      <span class="hl-red">margin-left: auto;</span> /* 💡 左側の余白を可能な限り取る ＝ 自分を右端に押しやる */<br>
    }
  </div>

</div>
CSSコード表示
.rl-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.rl-layout-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #dc3545;
  text-align: center;
}

.rl-demo-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-color: #e9ecef;
  padding: 40px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.rl-header-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rl-header-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* 共通のヘッダーベース（親のFlexコンテナ） */
.rl-header {
  display: flex;
  align-items: center;
  background-color: #343a40;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 共通パーツ装飾 */
.rl-logo {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
}
.rl-nav {
  display: flex;
  gap: 20px;
}
.rl-nav-link {
  color: #adb5bd;
  font-size: 14px;
  font-weight: bold;
}
.rl-search {
  background-color: #495057;
  color: #ced4da;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 12px;
  margin-left: 30px;
}

/* ＝⭕️ 実践コード1：space-between（親で制御）＝ */
.is-space-between {
  justify-content: space-between;
}

/* ＝⭕️ 実践コード2：margin-left: auto（子で制御）＝ */
.is-margin-auto {
  /* 親はデフォルトの左詰めのまま */
}

.rl-login-btn {
  margin-left: auto; /* 💡 これが鉄則 */
  background-color: #0d6efd;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.rl-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

align-itemsが効かない！よくある原因と解決策

Flexboxでレイアウトを組む際、「指定したのにalign-itemsが効かない！」とパニックになるのは、誰もが一度は通る道です。

あなたのコードが以下の「3つのよくある原因」のどれかに当てはまっていないかを確認しましょう。

ここでは、現場でも頻発する「効かない原因」と解消する解決策を解説します。

align-itemsが効かない！よくある原因と解決策
  • 親要素に高さを指定していない
  • 要素に固有の高さがある
  • 存在しない値space-betweenを指定

親要素に高さを指定していない

要素を縦の中央に配置しようとしてalign-items: center;を書いたのに、全く動かないというトラブルがあります。

縦方向の配置（align-items）を操作する際は、「親要素に、子要素が動くための十分な高さがあるか」をブラウザの検証ツール（デベロッパーツール）で確認するのがよいです。

画面全体の中央に置きたい場合は、親要素にheight: 100vh;やmin-height: 200px;などを明示的に指定する必要があります。

⭕️ centerを効かせるには、親要素に「動くための縦スペース（高さ）」が必須！

❌ 親に height 指定なし
（余白がないので動けない）

ITEM

⭕️ 親に height: 150px; を指定
（余白があるから中央に寄る！）

ITEM
/* ❌ 親要素に高さがないと、align-items は無意味になる */
.no-height-container {
  display: flex;
  align-items: center; /* 💡 縦の余白がないため、視覚的な変化が起きない */
}

/* ⭕️ 縦中央に寄せたいなら、親要素に高さを設ける */
.has-height-container {
  display: flex;
  align-items: center; /* 💡 確保した高さの中で、見事中央に配置される */
  height: 150px; /* 💡 これが必須！ */
}
HTMLコード表示
<div class="err-layout-wrapper">
  
  <p class="err-caption">⭕️ centerを効かせるには、親要素に「動くための縦スペース（高さ）」が必須！</p>

  <div class="err-demo-area">
    
    <div class="err-box-wrapper">
      <p class="err-label">❌ 親に height 指定なし<br><small>（余白がないので動けない）</small></p>
      
      <div class="err-container-no-height">
        <div class="err-item">ITEM</div>
      </div>
    </div>

    <div class="err-box-wrapper">
      <p class="err-label">⭕️ 親に height: 150px; を指定<br><small>（余白があるから中央に寄る！）</small></p>
      
      <div class="err-container-has-height">
        <div class="err-item">ITEM</div>
      </div>
    </div>

  </div>

  <div class="err-code-area">
    /* ❌ 親要素に高さがないと、align-items は無意味になる */<br>
    <span class="hl-blue">.no-height-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 縦の余白がないため、視覚的な変化が起きない */<br>
    }<br><br>

    /* ⭕️ 縦中央に寄せたいなら、親要素に高さを設ける */<br>
    <span class="hl-blue">.has-height-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: center;</span> /* 💡 確保した高さの中で、見事中央に配置される */<br>
      <span class="hl-green">height: 150px;</span> /* 💡 これが必須！ */<br>
    }
  </div>

</div>
CSSコード表示
.err-layout-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.err-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #198754;
  text-align: center;
}

.err-demo-area {
  display: flex;
  justify-content: center;
  gap: 30px;
  background-color: #e9ecef;
  padding: 40px;
  border-radius: 8px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.err-box-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 250px;
}

.err-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.err-item {
  background-color: #0d6efd;
  color: white;
  padding: 15px 30px;
  font-weight: bold;
  border-radius: 4px;
}

/* ＝❌ 実践コード：高さなし＝ */
.err-container-no-height {
  display: flex;
  align-items: center; /* 効かない */
  justify-content: center;
  background-color: #fff;
  border: 2px solid #dc3545; /* エラーを赤枠で表現 */
  border-radius: 4px;
  /* heightの指定なし */
}

/* ＝⭕️ 実践コード：高さあり＝ */
.err-container-has-height {
  display: flex;
  align-items: center; /* 効く！ */
  justify-content: center;
  background-color: #fff;
  border: 2px solid #198754; /* 成功を緑枠で表現 */
  border-radius: 4px;
  height: 150px; /* 💡 これが正解 */
}

.err-code-area {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

横幅や高さを指定するwidthやheightの使い方を詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

要素に固有の高さがある

「カード型のレイアウトで一番中身が多いカードに合わせて他のカードの高さも引き伸ばしたい」という場合に用いるのがalign-items: stretch;です。

しかし、これがうまく効かないトラブルも頻出します。

カードレイアウトなどで高さを自動的に揃えたい場合は、「子要素のheightは指定しない（autoのままにしておく）」のがよいです。

もし、最低限この高さは維持したいという要件がある場合は、heightではなくmin-height（最小高さ）を指定することでstretchの効果を殺さずにレイアウトを組めます。

⭕️ stretch を効かせたいなら、子要素の height を削除せよ！

基準となる
テキストが
多い要素
⭕️ 指定なし
（親に合わせて伸びる）
❌ height: 60px;
（伸びない！）
.flex-container {
  display: flex;
  align-items: stretch; /* 💡 子要素を親の高さまで引き伸ばす命令 */
}

/* ⭕️ 引き伸ばしたい子要素には height を書かない */
.item-correct {
  background-color: #198754;
  /* height は書かない！ */
}

/* ❌ 子要素に高さがあると、stretch が無視される */
.item-wrong {
  background-color: #dc3545;
  height: 60px; /* 💡 これが stretch を邪魔している元凶！！ */
}
HTMLコード表示
<div class="err-layout-wrapper">
  
  <p class="err-caption">⭕️ stretch を効かせたいなら、子要素の height を削除せよ！</p>

  <div class="err-demo-area">
    
    <div class="err-stretch-container">
      
      <div class="err-stretch-item">基準となる<br>テキストが<br>多い要素</div>

      <div class="err-stretch-item is-correct">⭕️ 指定なし<br><small>（親に合わせて伸びる）</small></div>

      <div class="err-stretch-item is-wrong">❌ height: 60px;<br><small>（伸びない！）</small></div>

    </div>

  </div>

  <div class="err-code-area">
    <span class="hl-blue">.flex-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: stretch;</span> /* 💡 子要素を親の高さまで引き伸ばす命令 */<br>
    }<br><br>

    /* ⭕️ 引き伸ばしたい子要素には height を書かない */<br>
    <span class="hl-blue">.item-correct</span> {<br>
      <span class="hl-green">background-color: #198754;</span><br>
      <span class="hl-comment">/* height は書かない！ */</span><br>
    }<br><br>

    /* ❌ 子要素に高さがあると、stretch が無視される */<br>
    <span class="hl-blue">.item-wrong</span> {<br>
      <span class="hl-green">background-color: #dc3545;</span><br>
      <span class="hl-red">height: 60px;</span> /* 💡 これが stretch を邪魔している元凶！！ */<br>
    }
  </div>

</div>
CSSコード表示
.err-stretch-container {
  display: flex;
  align-items: stretch; /* 💡 高さを揃える */
  gap: 15px;
  background-color: #fff;
  border: 2px solid #ced4da;
  border-radius: 8px;
  padding: 15px;
  width: 100%;
}

.err-stretch-item {
  background-color: #6c757d;
  color: white;
  padding: 15px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  flex: 1;
}

/* ⭕️ 成功（height指定なし） */
.err-stretch-item.is-correct {
  background-color: #198754;
}

/* ❌ 失敗（height固定） */
.err-stretch-item.is-wrong {
  background-color: #dc3545;
  height: 60px; /* 💡 これが原因で伸びない */
}

存在しない値space-betweenを指定

Flexboxで両端に要素を配置する便利な値がspace-betweenです。

CSSの仕様において、align-itemsプロパティにspace-betweenやspace-aroundという値は存在しません。

space-betweenは、あくまで「主軸の余白をどう分配するか（justify-content）」、または「複数行の行間の余白をどう分配するか（align-content）」に使用する値です。

1行のアイテムの縦の配置を決めるalign-itemsに指定しても、ブラウザは「そんな値は知らない」と無視します。

「縦並び（上から下）の要素を上端と下端に突き放して配置したい」場合は、存在しないalign-items: space-between;を書くのではなく、Flexコンテナの主軸を縦に変更（flex-direction: column;）し、その上でjustify-content: space-between;を指定するのが正しいアプローチです。

軸（方向）を入れ替えることで、上下の両端配置が実現します。

⭕️ align-items に space-between は存在しない！縦の両端配置は column で作る

❌ align-items: space-between
（存在しない値なので無視される）

A
B

⭕️ flex-direction: column
＋ justify-content: space-between

A
B
/* ❌ 存在しない値を指定してしまう */
.wrong-container {
  display: flex;
  align-items: space-between; /* 🚨 構文エラー（無効）！ */
}

/* ⭕️ 縦に突き放したいなら「縦並び」にして「主軸」で制御する */
.correct-container {
  display: flex;
  flex-direction: column; /* 💡 まず要素を縦並びに変更する */
  justify-content: space-between; /* 💡 主軸（今回は縦）の余白を両端に分配する！ */
  height: 150px; /* 💡 突き放すための高さが必須 */
}
HTMLコード表示
<div class="err-layout-wrapper">
  
  <p class="err-caption">⭕️ align-items に space-between は存在しない！縦の両端配置は column で作る</p>

  <div class="err-demo-area">
    
    <div class="err-box-wrapper">
      <p class="err-label">❌ align-items: space-between<br><small>（存在しない値なので無視される）</small></p>
      
      <div class="err-invalid-container">
        <div class="err-item-small">A</div>
        <div class="err-item-small">B</div>
      </div>
    </div>

    <div class="err-box-wrapper">
      <p class="err-label">⭕️ flex-direction: column<br><small>＋ justify-content: space-between</small></p>
      
      <div class="err-valid-column-container">
        <div class="err-item-small">A</div>
        <div class="err-item-small">B</div>
      </div>
    </div>

  </div>

  <div class="err-code-area">
    /* ❌ 存在しない値を指定してしまう */<br>
    <span class="hl-blue">.wrong-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">align-items: space-between;</span> /* 🚨 構文エラー（無効）！ */<br>
    }<br><br>

    /* ⭕️ 縦に突き放したいなら「縦並び」にして「主軸」で制御する */<br>
    <span class="hl-blue">.correct-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">flex-direction: column;</span> /* 💡 まず要素を縦並びに変更する */<br>
      <span class="hl-red">justify-content: space-between;</span> /* 💡 主軸（今回は縦）の余白を両端に分配する！ */<br>
      <span class="hl-green">height: 150px;</span> /* 💡 突き放すための高さが必須 */<br>
    }
  </div>

</div>
CSSコード表示
.err-item-small {
  background-color: #0d6efd;
  color: white;
  padding: 10px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  width: 40px;
}

/* ＝❌ 実践コード：無効な指定＝ */
.err-invalid-container {
  display: flex;
  align-items: space-between; /* 💡 無効なのでデフォルト(stretch)などの挙動になるか、上に詰まる */
  background-color: #fff;
  border: 2px solid #dc3545;
  border-radius: 4px;
  height: 150px;
  padding: 10px;
  gap: 10px;
}

/* ＝⭕️ 実践コード：正しい縦の両端配置＝ */
.err-valid-column-container {
  display: flex;
  flex-direction: column; /* 💡 要素を縦並びにする */
  justify-content: space-between; /* 💡 縦軸方向で両端に突き放す */
  align-items: center; /* 💡 ついでに横方向を中央にしておく */
  background-color: #fff;
  border: 2px solid #198754;
  border-radius: 4px;
  height: 150px;
  padding: 10px;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • align-itemsは、FlexboxやGridにおいて交差軸（主に縦方向）の配置を制御するプロパティである。
  • 初期値はstretchであり、子要素の高さが親コンテナに合わせて自動的に引き伸ばされる。
  • 代表的な値として、center（中央揃え）、flex-start（上揃え）、flex-end（下揃え）、baseline（テキストの底辺揃え）がある。
  • justify-contentは主軸（主に横方向）の余白配分を制御し、align-itemsは交差軸（主に縦方向）を制御する役割を持つ。
  • align-contentはflex-wrap: wrapが指定された「複数行」の行の束全体の配置を制御し、単一行の場合はalign-itemsを使用する。
  • 中央揃え（center）が効かない場合は「親要素に動くための高さ（height）が確保されていない」ことが最大の原因である。
  • 引き伸ばし（stretch）が効かない場合は「子要素に固定の高さ（height）が指定されている」ことが原因である。
  • align-itemsにspace-betweenやspace-aroundといった値は存在せず、縦に突き放したい場合はflex-direction: columnとjustify-contentを組み合わせる必要がある。

よくある質問（FAQ）

align-itemsとjustify-contentの違いは何ですか？

制御する「軸（方向）」が違います。

親要素がdisplay: flex;の場合、justify-contentは主軸（左右・横方向）の配置を決め、align-itemsは交差軸（上下・縦方向）の配置を決めます。

要素をコンテナの「上下左右の中央」に置きたい場合は、2つのプロパティ両方にcenterを指定するのがよいです。

align-items: center;を書いたのに、縦の中央に配置されません。なぜですか？

おそらく、「親要素に高さが設定されていないこと」が原因です。

CSSの仕様上、親要素の高さを指定していないと、親は子要素の高さに合わせて自動的に縮んで合わさります。

つまり、親と子の高さが同じ状態になるため、その中で「中央に寄せろ」と命令しても、動くための縦のスペースが存在せず、視覚的には何も変わっていないように見えます。

親要素にheightやmin-heightで高さを確保してください。

align-itemsとalign-contentの違いがわかりません。どちらを使うべきですか？

制御する対象が「1行ごと」か、「行の束全体」かの違いです。

align-contentは、親要素にflex-wrap: wrap;が指定されていて、アイテムが複数行に折り返されている場合にのみ効果を発揮します。

単一行の場合はalign-contentは無視されるため、無条件でalign-itemsを使用するのが正解です。

要素を右寄せにしたい場合、align-items: right;と書けば効きますか？

いいえ、効きません。

そもそもalign-itemsにrightやleftという値は存在しません。

通常の横並びにおいてalign-itemsは「縦方向」を制御するプロパティです。

要素を右寄せにしたい場合は、親要素にjustify-content: flex-end;を指定するか、右に寄せたい特定の子要素にmargin-left: auto;を指定するのが正しい方法です。

全体を中央揃えにしつつ、1つの要素だけを下揃えにすることはできますか？

はい、align-selfプロパティを使うことで実現できます。

親のFlexコンテナにalign-items: center;を指定して全体を縦の中央揃えにした上で、下に落としたい特定の子要素「だけ」にalign-self: flex-end;を指定します。

これにより、他のアイテムのレイアウトを崩すことなく、個別のアイテムの縦の配置ルールを上書きできます。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次