交差軸方向の配置
もう 1 本の軸がある
主軸が横向きのとき、それと直角に交わる縦向きの軸を交差軸(こうさじく)と呼びます。align-items は、この交差軸方向のそろえ方を決めるプロパティです。justify-content が横、align-items が縦、と覚えておくとしばらくは困りません。
よく使う値
stretchアイテムの高さを引きのばしてそろえる。これが既定ですcenter高さの中心でそろえるflex-start上端でそろえるflex-end下端でそろえるbaseline文字のベースラインでそろえる
既定が stretch なので、中身の量がちがうアイテムはいちばん高いものに合わせて縦に引きのばされます。プロフィールのように写真と文章で高さの差が大きいと、文章だけが上から流れはじめて落ち着きません。
中心でそろえる
.site-nav ul と .profile の 2 か所に align-items: center を足します。メニューは文字の高さがきれいにそろい、プロフィールは写真の中心と文章の中心が合って、ぐっと読みやすくなります。
.site-nav ul {
align-items: center;
}
.profile {
align-items: center;
}課題
- .site-nav ul に align-items の center を追加する
- .profile に align-items の center を追加する