間隔と伸縮
すきまは gap でつくる
アイテムどうしのすきまは、子に margin を書くより親に gap を書くほうがずっと簡単です。margin だと端にも余白がついてしまい、最初や最後だけ打ち消す指定が必要になります。gap はアイテムとアイテムの間にだけすきまを作るので、端はきれいなままです。余白の管理を親 1 か所に集められるのも大きな利点です。
伸び縮みを決める 3 つ
flex-growあまった幅を分け合って伸びる度合い。既定は 0 で伸びませんflex-shrink幅が足りないときに縮む度合い。既定は 1 で縮みますflex-basis伸び縮みする前の基準になる幅
写真は縮んでほしくないので flex-shrink: 0、文章はあまった幅を全部もらいたいので flex-grow: 1 です。あわせて flex-basis: 260px を書いておくと、その幅が取れない画面では折り返しに切りかわります。
書くもの
メニューに 20px、プロフィールに 24px、趣味リストに 8px、フッターのリンクに 16px の gap をつけます。フッターのリンクはまだ flex になっていないので、display の flex を書くところから始めてください。
.site-nav ul {
gap: 20px;
}
.profile-photo {
flex-shrink: 0;
}
.profile-text {
flex-grow: 1;
flex-basis: 260px;
}課題
- .site-nav ul に 20px、.profile に 24px、.hobby-list に 8px の gap を追加する
- .footer-links を display の flex にして gap を 16px にする
- .profile-photo に flex-shrink の 0 を指定して写真が縮まないようにする
- .profile-text に flex-grow の 1 と flex-basis の 260px を指定する