【CSS】floatとflexどっちがいい?
cssで基本的にfloatばっかり使っててdisplay: flex;をほとんど使ってこなかったので、お勉強がてら確認を。
きっかけ
はじまりはKazuki@エンジニアになってやるさんのこちらのツイート
すごーくすごーく雑で申し訳ありません。
— Kazuki@エンジニアになってやる (@tech_kazuki_49) 2019年3月25日
構造を写真のように捉えております。
?の部分がform_forと記述した範囲になりそうなのですが、いまいち理解してない部分になります。 pic.twitter.com/clQw6dgvor
ん?flexてどうやってやるんだったっけ…
というわけで確認。
まずはfloatで書いてみる
index.html
<div class="parent_a clearfix">floatパターン <p>parent A</p> <div class="child_a">child a</div> <div class="child_c">child c</div> </div>
index.css
.clearfix::after { content: ""; display: block; clear: both; } .parent_a { width: 720px; border: 1px solid #cccccc; text-align: center; } p { background-color: pink; margin: 0 auto; } .child_a { float: left; width: 120px; height: 40px; background-color: blue; opacity: 0.8; text-align: center; margin: 0 15px; } .child_c { float: right; width: 120px; height: 40px; background-color: yellow; opacity: 0.8; text-align: center; margin-right: 15px; }
うーん…ひさしぶりにcssで書くとやっぱわかりづらいな…scssの方が見やすい…
はさておき、それでできるのがこんなビュー
ポイントは
- parentにclearfixが必要
- childそれぞれにfloatが必要
ってとこ。
display: flex;を使ってみる
じゃ同じビューになるようにdisplay: flex;を使うとこんな感じ。
index.html
<div class="parent_b">flexパターン <p>parent B</p> <div class="flex"> <div class="child_b">child b</div> <div class="child_b right">child d</div> </div> </div>
index.css
.parent_b { width: 720px; border: 1px solid #cccccc; text-align: center; } p { background-color: pink; margin: 0 auto; } .flex { display: flex; } .child_b { width: 120px; height: 40px; background-color: blue; opacity: 0.8; text-align: center; margin: 0 15px; } .right { background-color: yellow; margin-left: auto; }
というわけで同じビューが作れた
ポイントは
- flexは適用させたい子の親のcssに記載
- 子には特に指示を入れなくてよい
- clearfixが不要
って感じ。
どっちが便利?
時と場合によるかと。
railsだとmixinにclearfixは用意しとくことが多いから、あまり不自由しないし。
ただ、flexだと左寄せ・右寄せだけじゃなくて均等割りとか色々なパターンに使えるのが利点。
2カラムまでならfloat, それ以上をうまく配置させたければflexって感じかな。