Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2019/04/08 2019/04/08 Web制作

【CSS】横並びのリストをFlexでスマートに作る方法

メニューとかでよく使う、横並びのリストを作る方法を紹介します。

floatinlineを使う方法もありますが、IE9以下を切り捨てても良い状況ならflexを使ったほうがお手軽&分かりやすいのでオススメです。

HTMLはシンプルにこれだけです。

このままだと表示結果はこんな感じ。

See the Pen GLjmvy by Kuzlog (@Kuzlog) on CodePen.28426

それではCSSを加えていきましょう。

横並び+ボーダーを追加

横並びにするだけなら、ul要素display:flexを指定するだけでOKです。枠線はなんかいい感じにしておきましょう(適当)。

表示結果です。

See the Pen MRjpMZ by Kuzlog (@Kuzlog) on CodePen.28426

リストの横幅を画面いっぱいに広げる+文字の中央寄せ

これも簡単。先程のCSSにちょろっと追記するだけです。

表示結果です。

See the Pen oOzWqW by Kuzlog (@Kuzlog) on CodePen.28426

角丸とか付けてみる

なんか思ったより短い記事になっちゃったのでおまけ。

See the Pen PgGmaa by Kuzlog (@Kuzlog) on CodePen.28426


以上です。

個人的にfloatの挙動が苦手なので、flexを使えるところはガンガン使っていこうと思ってます。早くIE死滅しないかな。