2020年1月22日display:flex;使ってますか?flexboxは便利すぎるので、「横並び」「中央配置」は基本的にflexを使っていました。弊社では、「極力flexは使用しないように」という方針になりましたw全面的に禁止、という訳ではありませんが、どんなバグが起こり得るのかを理解した上で使用すること他の再現方法も理解しておくことこの2点は抑えておく必要があるかな〜と感じ、横並びに関するCSSをまとめてみることにしました。flexのバグについては、参考になるQiita記事がありましたので、一読していただければと思います。CodePen.display:table;で、テーブル要素のように並べることができます。特徴としては、以下のような感じだと思います。要素が増えても段落ちしない自動で幅の調整が入る親要素に、display:table;子要素に、display:table-cell;これで横並びになります。親要素にtable-layout:fixed;を指定すると均等幅で並べることができます。均等幅で自動調整しつつ、段落ちして欲しくないものナビゲーションメニューには使えそうですね〜。CodePen.この例のように、画像とテキストを使ったレイアウトによく使います。inkline-blockはブロック要素として形成されつつも、inline要素の振る舞いをしてくれるので、インライン要素は横並びに表示されます。inline要素とblock要素の特徴を合わせもつ指定するだけでとりあえず横に並ぶvertical-alignが使える画像とテキストを横並びに表示したりするのに便利な印象です。verticalo-alignを指定すれば、要素の上に揃えたり、中央に揃えたりできるのでかなり使えます。注意するべきなのは、横並びにぴったりくっつけるには、letter-spacingかfont-sizeを指定して、隙間を無くさないといけません。CodePen.floatは正直あまり使っていませんが、この例のようにテキストが画像に回り込んだりするデザインに使います。親要素にoverflow:hidden;を指定してあげると、回り込みを防ぐことができます。PCとSPでデザインが異なる場合、floatで浮かせて位置調整をするというやり方もあります。flexboxは確かに便利すぎて使いまくってしまいますが、IEで表示が崩れたり、意外と修正が面倒だなと感じました。参考になれば幸いです。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。