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と同じ。