【Flexbox】要素を複数行にしたときの垂直方向を揃える「align-content」の使い方

この記事ではflex-wrap:wrapを指定して要素を複数行で表示した場合に垂直方向を揃えることができるalign-contentの使い方を解説します。
なおflex-wrap:nowrapとしている場合は、align-contentの記述は無効化されます。

MEMO

align-contentはフレックスボックスだけでなくグリッドレイアウトにも使用できます。

改行なしの場合flex-wrap:nowrap
初期値stretch
上揃えflex-start
下揃えflex-end
中央揃えcenter
両端揃えspace-between
均等揃えspace-around

目次へ

改行なしの場合`flex-wrap:nowrap`

flex-wrap:nowrapが指定されている場合は、以下のとおりalign-contentの記述は無効化されます。
そのため必ずflex-wrap:wrapで改行ありにしておきます。

HTML

<div id="container7">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container7{
  display:flex;
  flex-wrap:nowrap;/*改行なし*/
  align-content:stretch;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container7 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

初期値`stretch`

align-content:stretchを指定すると親要素の高さに応じて自動的に配置してくれます。

HTML

<div id="container6">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container6{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:stretch;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container6 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

上揃え`flex-start`

align-content:flex-startを指定すると上揃えになります。

HTML

<div id="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:flex-start;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

下揃え`flex-end`

align-content:flex-endを指定すると下揃えになります。

HTML

<div id="container2">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container2{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:flex-end;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container2 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

中央揃え`center`

HTML

<div id="container3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container3{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:center;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container3 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

両端揃え`space-between`

align-content:space-betweenを指定すると両端揃えになります。

HTML

<div id="container4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container4{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:space-between;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container4 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}

均等揃え`space-around`

align-content:space-aroundを指定すると、両端にも間隔を空けて均等に配置します。

HTML

<div id="container5">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
</div>

CSS

#container5{
  display:flex;
  flex-wrap:wrap;/*改行あり*/
  align-content:space-around;
  height:180px;
  width:180px;
  border: 1px black solid;

}
#container5 > div{
  height:30px;
  width:30px;
  box-sizing:border-box;
  border: 1px black solid;
  background-color:lime;
}