主軸方向の配置
主軸という考え方
flex コンテナには主軸(しゅじく)があります。既定では左から右へ向かう横向きの軸で、flex アイテムはこの主軸にそって順にならんでいきます。justify-content は、その主軸のどこにアイテムのかたまりを寄せるかを決めるプロパティです。親に 1 行書くだけで、全体の位置がまとめて動きます。
よく使う値
flex-start主軸の先頭に寄せる。これが既定ですcenter主軸の真ん中に寄せるflex-end主軸の末尾に寄せるspace-between両端いっぱいまで広げ、アイテムの間を均等にあけるspace-aroundアイテムの左右に同じ幅の余白をつける
ナビバーでよく使うのは center と space-between です。ロゴを左、メニューを右に置きたいときは space-between が便利です。
メニューを中央に置く
今回はメニューをページの真ん中にそろえます。.site-nav ul に justify-content: center を足すだけです。text-align: center では li の中の文字しか動きませんが、justify-content ならアイテムの箱ごとまとめて動きます。このちがいも値を切りかえて見くらべてみてください。
.site-nav ul {
display: flex;
justify-content: center;
}課題
- .site-nav ul に justify-content を追加する
- 値は center にして、メニュー全体を真ん中に寄せる