メニュー横並びのいろいろ【float、table、flex】 - みっちぇのWebデザイン研究所

横並びの方法はいろいろありますが、わたしはいつもdisplay:flex;を使用しています。

まあ手軽だし使い慣れてきたし…と思ってたんですが、そろそろ他のやり方も研究しようと思って、floatとtableパターンを作ってみました。

floatの場合

横幅はバラバラ。
float解除が面倒。
親要素の::afterにclear:both指定。

横幅が狭くなると崩れる。
あんまり調べてないので、崩れず表示できるのかもしれないですが。

liのwidthの値を%にしました。
これにより、ウィンドウ幅が変わっても、一応変動してくれます。

英数字は折り返し設定するとデザインが崩れるので、とりあえず横スクロールできるようにして回避。
それでもボーダーがへんなとこにきておかしいことになってますね。

小さい端末（スマホとか）は横メニューより、ハンバーガーメニューとかで縦の方がやっぱりよいかなあ。

綺麗に横幅揃う。
簡単。

メニュー自体を2行にするとかは難しいかも。
でもほとんどが1行メニューだから、関係ない？

文字数多いと改行するので、文字が変なとこいっちゃいますが。

利点はモバイルにも対応しやすいことだと思います。
display:flex;をつけたら、モバイルの時は flex-direction:column;で縦並び、PCの時はflex-direction:row;で横並び。

見本は当ブログのメニューがそうですね。

あとでcode penにも載せておきますが今回はこのへんで。