3秒でわかる
Flexbox や Grid で、主軸と直交する方向の揃え方を親から指定する CSS プロパティ。縦方向の中央揃えで最もよく使われます。
もう少し詳しく
どういうものか
align-items は、Flexbox や Grid のコンテナに対して、交差軸方向で子要素をどう揃えるかを指定する CSS プロパティです。flex-direction が row のとき主軸は横、交差軸は縦になるので、align-items は縦方向の揃えを決めます。flex-direction を column にすると主軸と交差軸が入れ替わり、同じ指定が横方向の揃えに変わります。
取る値は stretch(初期値、交差軸いっぱいに引き伸ばす)、flex-start、flex-end、center、baseline です。
なぜ必要か
縦方向の中央揃えは、Flexbox 以前は難題でした。高さが決まっていれば line-height で誤魔化せますが、中身の量で高さが変わる要素では成立しません。position を absolute にして transform でずらす回避策も、親の高さを別途決める必要がありました。align-items に center と書くだけで、この面倒がまとめて消えます。
具体例
.header {
display: flex;
<a href="/glossary/justify-content" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">justify-content</a>: space-between; /* 主軸(横)の配置 */
align-items: center; /* 交差軸(縦)の揃え */
height: 64px;
}
.card {
display: flex;
align-items: flex-start; /* 高さの違う要素を上端で揃える */
}
.card .icon {
align-self: center; /* 子ひとつだけ揃え方を変える */
}align-items: center
+------------------------------+
| [logo] [nav] | <- 縦中央に並ぶ
+------------------------------+つまずきやすいところ
justify-content と役割を取り違える。justify-content は主軸、align-items は交差軸flex-direction を column にした瞬間、align-items の center は横方向の中央揃えに変わる。方向を変えたのに揃えが崩れて見える原因はこれdisplay の flex か grid が付いていないstretch なので、指定していないのに子要素の高さが親に合わせて伸びていることがあるalign-self を使う似た用語との違い
| プロパティ | 対象 | 方向 |
|---|---|---|
| justify-content | 子全体 | 主軸 |
| align-items | 子全体 | 交差軸 |
| align-content | 行同士 | 交差軸(複数行のとき) |
| align-self | 子ひとつ | 交差軸 |
覚え方
justify は「並べる向き」、align は「それと直角の向き」と対で覚えます。方向を変えたら両方の意味が 90 度回ると意識すれば混乱しません。
