並ぶ方向と折り返し
主軸の向きを変える
flex-direction は主軸の向きを決めるプロパティです。既定は row で左から右、column にすると上から下に変わります。向きが変わると justify-content と align-items の担当も入れかわり、column のときは justify-content が縦のそろえ方、align-items が横のそろえ方になります。ここは最初によく混乱するので、実際に値を切りかえて画面で確かめるのが近道です。
入りきらない分を折り返す
flex アイテムは既定で 1 行に押しこまれ、幅が足りないと横につぶれていきます。親に flex-wrap: wrap を書くと、入りきらないアイテムが次の行へ折り返すようになります。せまい画面でメニューが読めない大きさにつぶれるのを防げるので、あとで学ぶレスポンシブ対応の下ごしらえにもなります。
ヘッダーとリストに当てる
ヘッダーは名前・肩書き・ナビを縦にならべたいので flex-direction: column、それを横方向の真ん中に寄せたいので align-items: center です。趣味リストは横にならべて折り返します。メニューとプロフィールにも flex-wrap: wrap を足しておきましょう。
.site-header {
display: flex;
flex-direction: column;
align-items: center;
}
.hobby-list {
display: flex;
flex-wrap: wrap;
}課題
- .site-header を flex にし、flex-direction を column、align-items を center にする
- .hobby-list に display の flex と flex-wrap の wrap を追加する
- .site-nav ul と .profile にも flex-wrap の wrap を追加する