01 / 05
書く場所が変わる
float は並べたい子のほうに書いた。Flexbox は逆で、子を入れている親のほうに書く。
この発想の転換がいちばん大事なところ。子には何も書かなくていいんだ。
<div class="menu"> <div class="item">あさ</div> <div class="item">ひる</div></div>ならべ方をあやつる
INPUT · スライド
並べ方は親が決める
01 / 05
書く場所が変わる
02 / 05
たった1行
親に display: flex; と書く。それだけで中の子が左から順に横並びになるよ。
clear の箱も要らないし、幅を計算しなくても入るだけ入る。
.menu { display: flex;}03 / 05
子はそのままでいい
子に float を書かなくていいだけでなく、
- 高さは自動でそろう
- 中身が空の箱を足さなくていい
- 幅を書かなければ中身ぶんの大きさになる
親が並べてくれるから、子は中身のことだけ考えればよくなるんだ。
04 / 05
置く位置も親が決める
justify-content を親に書くと、横方向のどこに寄せるかを決められる。よく使うのはこの3つ。
flex-start… 左に寄せる（はじめの状態）center… まん中に寄せるspace-between… 両端に寄せて間を均等にあける
.menu { display: flex; justify-content: center;}05 / 05
両端に置くのが一瞬になる
ロゴを左、メニューを右——float: left; と float: right; で書いていたあの形が、space-between の1行で済む。
ここから書いてみよう。
.header { display: flex; justify-content: space-between;}