マンガでわかるホームページ作成

floatはもう古い!?display:flexを使えば絶対崩れない!!

こんにちは。テイクです。ホームページを作り続けて9年になります。

横並べをするためのCSSといえば昔はfloatでした。
しかし、floatは崩れやすく、調節が面倒だったり、CSS初心者がはまりやすいポイントの一つです。

今回はfloatはもう古いのか、代替手段はなんなのか、今floatを使うならどんなときかを解説します。

↓もしfloatがうまくいかなくて困っているなら下記記事を参考にしてください。

今はdisplay:flexが便利

横並べするための新しい要素としてdisplay:flexが(だいぶ前に)登場しています。

display:flexを使うとfloatのデメリットである「崩れやすい」が解決できます。

display:flexは使っても大丈夫

IE11未満ではdisplay:flexがサポートされていませんでしたが、今はIE11未満自体がサポートされておらず、使っている人がほぼいないためdisplay:flexを含むCSS3を遠慮なく使うことができます。

※一部のCSS3は今でもブラウザによってサポートされていません。

display:flexのメリット

絶対崩れない!!

flex-wrap: nowrap(初期値)をセットで使うと子要素の幅合計が100%を超えても自動で幅が再計算され100%に収まるようになります。

これだけだとtableと同じですね。さらにtableとの違いも検証します。

内容量によって勝手に幅が変わらない

tableの場合は幅固定が難しく、内容量によって勝手に幅が変わる場合があります。
display:flexの場合、きちんと計算して幅合計が100%になっていれば内容量に関わらず勝手に幅が変わりません。

max-width,min-widthが使える

tableはmax-width,min-widthが使えません。
display:flexの場合、max-width,min-widthが使えます。

高さをそろえることができる

floatだと要素ごとに高さはバラバラできれいに揃えるのが難しいです。

display:flexは横の要素を1段ごとに高さをそろえることができます。

 

↓flexについてもっと詳しく知りたい方はこちら

floatを使ってもいい

ここまでdisplay:flexのメリットを挙げたわけですが、floatを使ってはいけないわけではありません。

以下のような場合は、むしろfloatのほうが適切です。

古いブラウザなどをサポートする必要がある

display:flexは古いブラウザでは使えません。もし古いブラウザでも崩れないようにする案件であればfloatを使わざるをえません。

ホームページビルダーの編集画面で崩れないように表示させたいならfloatです。

高さをそろえたくない

display:flexは高さが強制的にそろいますが、逆に高さをそろえたくないならfloatを使いましょう。

要素をそれぞれ左端と右端に置きたいとき

flexでも justify-content: space-between を指定することで実現可能です。ただし2段になったとき(改行されたとき)左揃いになってしまいます。

2段になっても左端と右端にする場合はそれぞれfloat:left float:rightを使用すると良いでしょう。

firefoxの印刷に対応させたいとき

firefoxではflexを指定している要素を印刷した場合がA4印刷範囲からはみ出た分が消えるか崩れます。

これについては明確な回避策がなくfloatを使うしかありません。

まとめ

横並べにはdisplay:flexが便利です。基本的にはdisplay:flexでよいでしょう。
ただし、display:flexの特性が邪魔になる場合はfloatを使うなど使い分けも必要です。

関連記事