HTML,CSS

【css】リスト(UL/LI) を横並べにする「flexbox」の書き方

2016/12/01

リストや定義リストなどを横並べに配置する「flexbox」の書き方メモ。
以前書いたポストの補完記事を目指します。

flexboxとは

正しくは「CSS Flexible Box Layout Module」といい、CSS3から導入された、フレキシブル(柔軟)にレイアウトを可能にするボックスのことで、スペースの操作や要素を上下左右に揃えるなど、従来ではちょっと手間だったレイアウトも Flexbox を使う事により、より少ないコードで簡単に実装することが可能だったりするレイアウトモジュールです。

リストを flexbox で横に並べる

デモはコチラ

通常リストの作成

わかりやすく、以下のcssを当てています。

結果は以下のように。

flexbox_00_none

flexboxデモ

デモ1

結果

flexbox_01_demo1

↑ ULに display: flex; を適用することで li内容が横に並んでいます。

デモ2

結果

flexbox_02_demo2

↑ ulの横幅を250px固定とした為、li内容(文字)が縦に並んでいます。

flexbox デモ3

結果

flexbox_03_demo3

↑ liの横幅を3emとし、ulに flex-wrap: wrap; を適用することで、親要素の幅に収まらない場合は改行させています

flexbox デモ4

結果

flexbox_04_demo4

↑ ul に justify-content: center; を適用することで、li内容をセンタリングさせます。

flexbox デモ5

結果

flexbox_05_demo5

↑ デモ4と同じ内容で、リスト内容の文字数がバラバラの場合

flexbox デモ6

結果

flexbox_06_demo6

↑ リスト内容(liに中)を <span> で括り、li に display: table;、span に display: table-cell;vertical-align: middle; を適用することで、リストを縦方向に同じサイズとし、文字を縦方向センタリングさせています。

flexbox デモ7

横:400px

結果

flexbox_07_demo7

リストの縦横を同じサイズにして(リストを)丸くする。ULの横幅は400px。

flexbox デモ8

横:450px

flexbox_08_demo8

デモ7と同じ内容で 横幅を450px とすると、リストはセンタリングしてこのように表示されます。

デモはコチラ

-HTML,CSS
-, , ,