ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】align-contentの使い方！flexアイテムの配置や余白を指定する方法

【CSS】align-contentの使い方！flexアイテムの配置や余白を指定する方法

HTML/CSS

2022/04/16

2023/05/06

align-content を使用すれば、簡単にflexアイテムの縦の配置や余白を簡単に指定することができます。flexアイテムを折り返すときのレイアウト作成が効率よく行えるので、学習してみましょう。

この記事では align-content の使い方を解説します。

この記事で身につく内容

align-content とは
align-content の使い方
align-content と align-items の違い
align-content が効かない原因

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

align-content は、flexbox に関するプロパティのひとつです。flexbox は効率よくCSSのレイアウト作成を行える技術ですが、初学者にとってはつまづきやすい部分でもあります。

flexbox については、こちらの記事で詳しく解説しています。flexbox の基礎知識やプロパティ一覧を解説しているので、ぜひ学習にお役立てください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

align-contentとは
align-contentの使い方
align-content と align-items の違い
align-contentが効かない原因
まとめ

align-contentとは

align-content は、flexアイテムを折り返したときに上下の配置や余白を指定するプロパティです。align-content を使用すれば、下の画像のような表現が可能です。

align-contentの使い方

align-content の基本形は以下のとおりです。

基本書式

.flexbox {
  display: flex;
  flex-wrap: wrapまたはwrap-reverse;
  align-content: 値;
}

align-content はflexアイテムに対して有効なプロパティであるため、display: flex; と併用して親要素に記述します。また折り返したflexアイテムの配置を決定するという性質上、flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要です。

display: flex; , flex-wrap: 値; , align-content: 値; はすべて親要素（flexコンテナ）に指定します。

align-content で使用するおもな値は以下のとおりです。

align-contentで使用する値

flex-start： flexアイテムの上揃え
flex-end： flexアイテムの下揃え
center： flexアイテムの上下中央揃え
space-between：上下の両端揃え
space-around： flexアイテムの上下に均等な余白をとる
space-evenly：均等な余白をとる

flex-start

align-content: flex-start; は、flexアイテムを上寄せで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

flex-end

align-content: flex-end; は、flexアイテムを下寄せで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

center

align-content: center; は、flexアイテムを中央寄せで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

space-between

align-content: space-between; は、flexアイテムを上下の両端揃えで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

space-around

align-content: space-around; は、flexアイテムの上下の余白を均等につける指定です。

要素の上下に余白がつくため、上端と下端の余白は要素間の余白の半分となります。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

space-evenly

align-content: space-evenly; は、flexアイテムのすべての余白を均等につける指定です。

上端・要素間・下端の余白がすべて同じ大きさとなります。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

align-content と align-items の違い

align-content と似ているプロパティに、 align-items があります。両者の違いがよくわからない方も多いのではないでしょうか。

align-content と align-items の違いは、以下のようになっています。

align-content：flexアイテムを折り返しているときに、flexアイテムの上下の配置を決める
align-items：flexアイテムを折り返していないときに、flexアイテムの上下の配置を決める

実際の出力結果を確認してみましょう。

See the Pen align-contentとalign-itemsの違い by ZeroPlus (@zeroplus-programming) on CodePen.

align-itemsを指定したとき、flexアイテムが折り返されているとflexアイテムは列ごとに配置が決まっています。一方align-content を指定したときは、flexアイテム全体としてのまとまりがflexコンテナ内の上部に配置されている、という挙動になっています。

align-contentが効かない原因

align-content を使用する場面で、「効かない！」と感じることはありませんか？他のプロパティによっては、 align-content が適用されない状況になってしまいます。

そこで、どのようなときに align-content が無効になるのかを知っておきましょう。

align-content が効かないときは、以下のような原因が考えられます。

親要素（flexコンテナ）にdisplay: flex;が指定されていない
flexアイテムを折り返す指定になっていない
親要素に height が指定されていない

親要素（flexコンテナ）にdisplay: flex;が指定されていない

align-content は display: flex; と併用するプロパティです。親要素に display: flex; を指定していないと、flexboxを使用できないので align-content が効きません。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  flex-wrap: wrap;
  align-content: center;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

flexアイテムを折り返す指定になっていない

align-content は、flexアイテムを折り返しているときに配置を決定するプロパティです。そのため、flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要です。

flex-wrap の初期値は nowrap であるため、flexアイテムは折り返されません。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  align-content: center;
  width: 50%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}


.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}

親要素にheightが指定されていない

親要素に height の指定を忘れていると、 align-content が適用されません。

align-content で指定するflexアイテムの配置は親要素の高さの範囲内で決定されるので、親要素に高さが指定されていないとflexアイテムが動く余地がなくなるためです。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 50%;
  border: 1px solid #000;
  text-align: center;
}


.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 40%;
}