Flexboxをはじめよう

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

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

親が flex コンテナになる

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

2 か所を flex にする

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

たとえば保存・取消のボタンを包む要素に class="tool-buttons" を付けた場合、その親にだけ次の指定を書きます。ボタンが直接の子なら横に並びます。ボタンの中の文字やアイコンは、この指定の対象ではありません。演習では HTML を見て、並べたい要素を直接包む親を探しましょう。

<div class="tool-buttons">
  <button>保存</button>
  <button><span>詳細</span><span>表示</span></button>
</div>

.tool-buttons {
  display: flex;
}

.tool-buttons span {
  display: block;
}

横に並ぶのは2つのボタンです。2つ目のボタンの中の span は孫なので、親の flex によって横並びにはなりません。この例では、前回学んだ block を孫の span に指定し、ボタンの中だけを縦に並べています。

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