Flexboxをはじめよう

flex を書く場所

横にならべるのは親の仕事

前回リンクを inline-block にしても、メニューは縦にならんだままでした。リンクを包んでいる li が block だからです。ここで大事なのは、子どもを横にならべたいときに指示を出すのは子ども側ではなく親だ、ということです。この考え方でレイアウトを組むしくみが Flexbox です。

親が flex コンテナになる

親要素に display: flex と書くと、その親は flex コンテナになります。そして直接の子どもは全員 flex アイテムになります。flex アイテムになった要素は、もとが block でも inline でも関係なく、既定で左から右へ横一列にならびます。ならべ方の細かい指示も、これ以降ほとんど親のほうに書いていきます。

2 か所を flex にする

今回さわるのは 2 か所です。ナビのメニュー .site-nav ul に指定するとメニューが横一列になります。自己紹介の .profile に指定すると、プロフィール写真と文章が横にならびます。まだ間隔もそろえ方も指定していないので見た目は粗いままですが、そこは次のレッスンから順に整えていきます。

.site-nav ul { display: flex; } .profile { display: flex; }

課題

  1. .site-nav ul に display の flex を追加してメニューを横並びにする
  2. .profile のルールを新しく作り、display の flex を指定する

ヒント

index.html
style.css
プレビュー

できているか

  • メニューが横一列にならんでいる
  • プロフィールの写真と文章が横にならんでいる