3つのレイアウト手法
- floatレイアウト
- flexboxレイアウト
- gridレイアウト
float レイアウトの問題点
- 横並びにしたブロックの高さを揃えられない
- 横並びにしたブロックは上揃えにしかならない
- 幅の計算があわないとカラム落ちする
- float解除の仕組みが分かりづらい
現在の用途
- テキストの回り込み
flexbox の特徴
- 一方向の軸に沿ってアイテムを並べる「一次元のレイアウト手法」
- 常に決められた軸の方向に沿ってアイテムが並ぶ特徴があるため、要素の追加・削除などの変更もしやすい
grid の特徴
- あらかじめ決められた枠の中にアイテムを並べるレイアウトにむいている
- 枠の中を縦横のグリッド線で区切られたエリア枠を設定しアイテムを並べる「二次元のレイアウト手法」
- レイアウトのための div要素は不要
