親に1行足すと子が並ぶ

CSSレイアウト入門 / 全 5

変えるのは親、動くのは子

前回リンクを inline-block にしても、メニューは縦に並んだままでした。リンクを包んでいる li が block だからです。子どもを横に並べたいときに指示を出すのは、子ども側ではなく親です。

.site-nav ul {
.site-nav ul書くのは親のほう
display: flex;
flex直接の子が横一列になる
}

親が flex コンテナになると、直接の子は全員 flex アイテムになります。もとが block でも inline でも関係なく、既定で左から右へ並びます。

1 / 5

このスライドが付いているレッスンを開く