flexbox/align-items

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

フレックスアイテムの垂直方向のレイアウト指定するプロパティ。

align-items: normal

初期値。flexboxではalign-items: stretchと同じ挙動になる。

align-items: stretch

フレックスアイテムの高さがフレックスボックスの高さに伸長される。

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

align-items: start

フレックスアイテムを伸長せずに上に揃える。

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

align-items: end

フレックスアイテムを伸長せずに下に揃える。

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

align-items: flex-start、align-items: flex-end

align-items: start、align-items: endとおそらく同じ。おそらく、flexboxの時しか効果がない。

align-items: center

フレックスアイテムを伸長せずに中央に揃える。フレックスコンテナよりフレックスアイテムの方が大きい場合、両端がはみ出す。

<div style="display: flex; align-items: center; height: 50px; background:#ddd;">
  <div style="background:#ffb7b7">a</div>
  <div style="height: 70px; background:#b7b7ff">b</div>
</div>
a
b

align-items: baseline

フレックスアイテムを伸長せずにベースラインを揃える。

<div style="display: flex; align-items: baseline; background:#ddd;">
  <div style="background:#ffb7b7">Axg</div>
  <div style="font-size:1.5rem; background:#b7b7ff">Axg</div>
  <div style="font-size:3rem; background:#ffb7b7">Axg</div>
</div>
Axg
Axg
Axg