【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

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

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

改行なしの場合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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です