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

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

flexboxとは

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

リストを flexbox で横に並べる

デモはコチラ

通常リストの作成

[html]

• リスト1
• リスト2
• リスト3
• リスト4

[/html]

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

[css]
ul {
border: 1px solid #666;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
}

ul li {
border: 1px solid #aaa;
margin: 0.2em;
padding: 0.5em;
}
[/css]

結果は以下のように。

flexboxデモ

デモ１

[html]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

[/html]

[css]
ul.demo1 {
border: 1px solid #666;
display: flex;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
}

ul.demo1 li {
border: 1px solid #aaa;
margin: 0.2em;
padding: 0.5em;
}
[/css]

結果

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

デモ２

[html]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

[/html]

結果

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

flexbox デモ３

[html]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

[/html]

結果

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

flexbox デモ４

[html]

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

[/html]

[css]
ul.demo4 {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
width: 250px;
}

ul.demo4 li {
border: 1px solid #aaa;
line-height: 110%;
margin: 0.2em;
padding: 0.5em;
text-align: center;
width: 3em;
}
[/css]

結果

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

flexbox デモ５

[html]

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

[/html]

[css]
ul.demo5 {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
width: 250px;
}

ul.demo5 li {
border: 1px solid #aaa;
display: table;
line-height: 110%;
margin: 0.2em;
padding: 0.5em;
text-align: center;
width: 3em;
}
[/css]

結果

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

flexbox デモ６

[html]

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

[/html]

[css]
ul.demo6 {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
width: 250px;
}

ul.demo6 li {
border: 1px solid #aaa;
display: table;
height: 6em;
line-height: 110%;
margin: 0.2em;
padding: 0.5em;
text-align: center;
width: 3em;
}

ul.demo6 span {
display: table-cell;
vertical-align: middle;
}
[/css]

結果

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

flexbox デモ７

横：400px

[html]

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

[/html]

[css]
ul.demo7 {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
width: 400px;
}

ul.demo7 li {
border: 2px solid #88ccea;
border-radius: 50%;
display: table;
height: 6em;
line-height: 110%;
margin: 0.2em;
padding: 0.5em;
text-align: center;
width: 6em;
}

ul.demo7 span {
display: table-cell;
vertical-align: middle;
}
[/css]

結果

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

flexbox デモ８

横：450px

[html]

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

[/html]

[css]
ul.demo8 {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 0 1em;
padding: 0;
width: 450px;
}

ul.demo8 li {
border: 2px solid #88ccea;
border-radius: 50%;
display: table;
height: 6em;
line-height: 110%;
margin: 0.2em;
padding: 0.5em;
text-align: center;
width: 6em;
}

ul.demo8 span {
display: table-cell;
vertical-align: middle;
}
[/css]

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

デモはコチラ

-HTML,CSS
-CSS Flexible Box Layout Module, flexbox