HTML/CSS

【flexbox以外】要素を横並びにする方法のまとめ【使い分け】

display:flex;使ってますか?
flexboxは便利すぎるので、「横並び」「中央配置」は基本的にflexを使っていました。

 

しかし、IEで表示するとレイアウトが崩れたりすることが多く、

弊社では、「極力flexは使用しないように」という方針になりましたw

 

全面的に禁止、という訳ではありませんが、

  • どんなバグが起こり得るのかを理解した上で使用すること
  • 他の再現方法も理解しておくこと

この2点は抑えておく必要があるかな〜と感じ、横並びに関するCSSをまとめてみることにしました。

 

flexのバグについては、参考になるQiita記事がありましたので、一読していただければと思います。

 

 

display:table

See the Pen
display:table-cell
by kei (@kei_01011)
on CodePen.


display:table;で、テーブル要素のように並べることができます。

特徴としては、以下のような感じだと思います。

  • 要素が増えても段落ちしない
  • 自動で幅の調整が入る

 

親要素に、display:table;

子要素に、display:table-cell;

これで横並びになります。簡単ですね!

 

ただ、自動で幅が決まってしまうので、均等幅にしたい場合は、

親要素にtable-layout:fixed;を指定すると均等幅で並べることができます。

 

あまり使った経験がないですが、

均等幅で自動調整しつつ、段落ちして欲しくないもの

ナビゲーションメニューには使えそうですね〜。

 

inline-block

See the Pen
inline-block
by kei (@kei_01011)
on CodePen.

この例のように、画像とテキストを使ったレイアウトによく使います。

inkline-blockはブロック要素として形成されつつも、inline要素の振る舞いをしてくれるので、インライン要素は横並びに表示されます。

 

  • inline要素とblock要素の特徴を合わせもつ
  • 指定するだけでとりあえず横に並ぶ
  • vertical-alignが使える

 

画像とテキストを横並びに表示したりするのに便利な印象です。

verticalo-alignを指定すれば、要素の上に揃えたり、中央に揃えたりできるのでかなり使えます。

 

注意するべきなのは、横並びにぴったりくっつけるには、

letter-spacingfont-sizeを指定して、隙間を無くさないといけません。

 

float

See the Pen
float
by kei (@kei_01011)
on CodePen.

floatは正直あまり使っていませんが、この例のようにテキストが画像に回り込んだりするデザインに使います。

親要素にoverflow:hidden;を指定してあげると、回り込みを防ぐことができます。

 

PCとSPでデザインが異なる場合、floatで浮かせて位置調整をするというやり方もあります。

 

flexboxは確かに便利すぎて使いまくってしまいますが、

IEで表示が崩れたり、意外と修正が面倒だなと感じました。

 

他の方法も知っておくことで、柔軟に対応できるようになると思いますので、

少しでも参考になれば幸いです。