【CSS】align-contentの使い方を解説｜Flexbox・Grid対応

CSSのalign-contentプロパティは、FlexboxやGridレイアウトで複数行にわたるアイテムの縦方向の揃え方を調整するために使います。

似た名前のalign-itemsとは働きが異なるため、混同しやすいプロパティでもあります。

このページでは、align-contentの使い方を初心者でも理解できるように、コード例（HTML・CSS）を使って解説していきます。

align-contentとは？

align-contentは、複数行のアイテムのまとまり（行の塊）を縦方向にどう配置するかを指定するCSSプロパティです。

主に次のような場面で使います。

Flexboxでflex-wrap: wrapを指定したとき
Gridレイアウトで行数が複数あるとき
コンテナに高さ（height）が明示されているとき

heightやmin-heightがコンテナに指定されている場合、複数行になった子要素をどのように配置するかを指定するのがalign-contentです。

単一行の場合は効果がない点に注意してください。単一行に使うにはalign-itemsを使用します。

使用可能な値と意味

値	意味
`stretch`（初期値）	行の高さを伸ばして、コンテナの高さにフィットさせる
`flex-start`	行全体を上寄せに配置
`flex-end`	行全体を下寄せに配置
`center`	行全体を中央に揃える
`space-between`	行と行の間に均等なスペース（端には余白なし）
`space-around`	行の上下に均等なスペース（上下にも余白あり）
`space-evenly`	行の間・上下すべてに均等なスペース

実践コード例（HTML + CSS）

ここでは、Flexboxを用いた具体例を紹介します。

normal

align-contentの初期値はnormalです。以下はnormalになっている場合の表示例です。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* コンテナの設定 */
.container {
  display: flex;
  flex-wrap: wrap;           /* 複数行にする */
  height: 300px;             /* align-contentが効くように高さを指定 */
  align-content: normal;     /* デフォルト */
  width: 500px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  gap: 10px;                 /* 行・列間の余白 */
}

/* アイテムの見た目 */
.item {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}

Preview

start

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* コンテナの設定 */
.container {
  display: flex;
  flex-wrap: wrap;           /* 複数行にする */
  height: 300px;             /* align-contentが効くように高さを指定 */
  align-content: start;     /* 上に配置 */
  width: 500px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  gap: 10px;                 /* 行・列間の余白 */
}

/* アイテムの見た目 */
.item {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}

Preview

center

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* コンテナの設定 */
.container {
  display: flex;
  flex-wrap: wrap;           /* 複数行にする */
  height: 300px;             /* align-contentが効くように高さを指定 */
  align-content: center;     /* 中央に配置 */
  width: 500px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  gap: 10px;                 /* 行・列間の余白 */
}

/* アイテムの見た目 */
.item {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}

Preview

space-between

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* コンテナの設定 */
.container {
  display: flex;
  flex-wrap: wrap;           /* 複数行にする */
  height: 300px;             /* align-contentが効くように高さを指定 */
  align-content: space-between;     /* 均等配置 */
  width: 500px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  gap: 10px;                 /* 行・列間の余白 */
}

/* アイテムの見た目 */
.item {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}

Preview

他の値に変えてみよう

以下のようにalign-contentの値を変えて、挙動を比較してみましょう。

align-content: flex-start;    /* 行全体を上に寄せる */
align-content: flex-end;      /* 行全体を下に寄せる */
align-content: space-between; /* 行間を均等に配置（端には余白なし） */
align-content: space-around;  /* 行上下に均等な余白 */
align-content: space-evenly;  /* 完全に均等な間隔 */

見た目の違いを視覚的に確認することで、align-contentの動作がより理解しやすくなります。

値には全部で以下のようなものがあります。

/* 通常の配置 */
align-content: normal;

/* 基本的な位置による配置 */
/* align-content は left および right の値を取りません */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

/* ベースラインの配置 */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 均等配置 */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* あふれた場合の配置 */
align-content: safe center;
align-content: unsafe center;

/* グローバル値 */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;