頭脳一式

Categories: HTML&CSS

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

【CSS3】要素を複数行にしたときの垂直方向を揃える「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で改行ありにしておきます。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

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を指定すると親要素の高さに応じて自動的に配置してくれます。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

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を指定すると上揃えになります。

See the Pen
align-content1 by shiakisudev (@shiakisu)
on CodePen.

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を指定すると下揃えになります。

See the Pen
align-content2 by shiakisudev (@shiakisu)
on CodePen.

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`

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

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を指定すると両端揃えになります。

See the Pen
align-content4 by shiakisudev (@shiakisu)
on CodePen.

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を指定すると、両端にも間隔を空けて均等に配置します。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

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;
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

issiki_wp