flexbox/align-content

ドキュメント：align-content - CSS: カスケーディングスタイルシート MDN

複数行（複数列）になった場合のレイアウト指定。flexboxの場合、flex-wrap: nowrapの状態ではこのプロパティは効果がないっぽい。

align-content: normal

初期値。既定の位置になる。

<div style="display: flex; align-content: normal; flex-wrap: wrap; width: 170px; height: 80px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b

align-content: start

先頭側に寄せる。

<div style="display: flex; align-content: start; flex-wrap: wrap; width: 170px; height: 80px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b

align-content: end

末尾側に寄せる。

<div style="display: flex; align-content: end; flex-wrap: wrap; width: 170px; height: 80px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b

align-content: flex-start、align-content: flex-end

基本的にstart、endと同じ。flexboxの場合、違いがでることがあるっぽいがよくわかない。

<div style="display: flex; align-content: flex-end; flex-wrap: wrap; width: 170px; height: 80px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b

align-content: center

中央に寄せる。

<div style="display: flex; align-content: center; flex-wrap: wrap; width: 170px; height: 80px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
</div>
a
b
a
b

align-content: space-between

フレックスアイテムを均等に配置する。最初のアイテムは先頭に、最後のアイテムは末尾によせられる。

<div style="display: flex; align-content: space-between; flex-wrap: wrap; width: 120px; height: 130px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
</div>
a
b
a
b
a

align-content: space-around

フレックスアイテムを均等に配置する。先頭と末尾はアイテム間の間隔の半分の間隔がつく。

<div style="display: flex; align-content: space-around; flex-wrap: wrap; width: 120px; height: 130px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
</div>
a
b
a
b
a

align-content: space-evenly

フレックスアイテムを均等に配置する。先頭と末尾と各アイテム間に同じように間隔がつく。

<div style="display: flex; align-content: space-evenly; flex-wrap: wrap; width: 120px; height: 130px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
</div>
a
b
a
b
a

align-content: baseline

わからん。

<div style="display: flex; align-content: baseline; flex-wrap: wrap; width: 120px; height: 130px; background: #ddd;">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; font-size: 3em; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="width: 50px; background:#b7b7ff">b</div>
  <div style="width: 50px; background:#ffb7b7">a</div>
</div>
a
b
a
b
a

align-content: stretch

おそらく、flexboxにおいてはnormalと同じ。