【CSS】横並びのリストをFlexでスマートに作る方法メニューとかでよく使う、横並びのリストを作る方法を紹介します。floatやinlineを使う方法もありますが、IE9以下を切り捨てても良い状況ならflexを使ったほうがお手軽&分かりやすいのでオススメです。HTMLはシンプルにこれだけです。1234567<ul><li>Item.1</li><li>Item.2</li><li>Item.3</li><li>Item.4</li><li>Item.5</li></ul>このままだと表示結果はこんな感じ。CodePen.28426それではCSSを加えていきましょう。横並びにするだけなら、ul要素にdisplay:flexを指定するだけでOKです。枠線はなんかいい感じにしておきましょう(適当)。CodePen.28426リストの横幅を画面いっぱいに広げる+文字の中央寄せこれも簡単。先程のCSSにちょろっと追記するだけです。CodePen.28426角丸とか付けてみるなんか思ったより短い記事になっちゃったのでおまけ。CodePen.28426以上です。個人的にfloatの挙動が苦手なので、flexを使えるところはガンガン使っていこうと思ってます。早くIE死滅しないかな。【CSS】ボックス幅の計算が簡単になる「box-sizing」の使い方Author名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。