Webデザイン勉強ブログ

Webデザイン超初学者の勉強用備忘録です。初学者の方の参考にもなればうれしいです!

floatとflexboxの違い

要素を横並びにしたいときにいつも悩んでいたfloat?flexbox?どっちがいいの問題。

いい加減頭を整理しようと思います。

 

二つの違い

float

  • 要素の高さが無くなる(認識されなくなる、浮く)
  • clearfixでの回り込み解除が必要
  • 横並びにしたい要素に指定する
  • なんか難しい(個人的な感想)
  • でも分かってる感があってかっこいい(個人的な感想)

f:id:lalune_webdedign:20210102105412p:plain

Webデザインを勉強してたことある方ならだれもが見たことがあると思われるこんな状態になっちゃいがち。

 

flexbox

  • 要素の高さはそのまま認識される
  • 解除などの付随する記述は不要
  • 横並びにしたい親要素に指定する
  • floatにくらべ簡単

 

個人的な感想多めですが、こんな違いかと思います!

こちらの記事がとても分かりやすかったです。

 

nihonsoukou.com