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

2016/11/01 2019/12/16

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

flexboxとは

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

リストを flexbox で横に並べる

デモはコチラ

通常リストの作成

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
</ul>

<ul>

</ul>

わかりやすく、以下の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;
}

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;

}

結果は以下のように。

flexboxデモ

デモ１

<ul class="demo1">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

</ul>

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;
}

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;

}

結果

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

デモ２

<ul class="demo2">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

</ul>

ul.demo2 {
    border: 1px solid #666;
    display: flex;
    list-style-type: none;
    margin: 0 0 0 1em;
    padding: 0;
    width: 250px;
}

ul.demo2 li {
    border: 1px solid #aaa;
    line-height: 110%;
    margin: 0.2em;
    padding: 0.5em;
    text-align: center;
}

ul.demo2 {

border: 1px solid #666;

display: flex;

list-style-type: none;

margin: 0 0 0 1em;

padding: 0;

width: 250px;

}

ul.demo2 li {

border: 1px solid #aaa;

line-height: 110%;

margin: 0.2em;

padding: 0.5em;

text-align: center;

}

結果

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

flexbox デモ３

<ul class="demo3">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

</ul>

ul.demo3 {
    border: 1px solid #666;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0 0 0 1em;
    padding: 0;
    width: 250px;
}

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

ul.demo3 {

border: 1px solid #666;

display: flex;

flex-wrap: wrap;

list-style-type: none;

margin: 0 0 0 1em;

padding: 0;

width: 250px;

}

ul.demo3 li {

border: 1px solid #aaa;

line-height: 110%;

margin: 0.2em;

padding: 0.5em;

text-align: center;

width: 3em;

}

結果

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

flexbox デモ４

<ul class="demo4">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>

</ul>

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;
}

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;

}

結果

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

flexbox デモ５

<ul class="demo5">
    <li>リストリスト1</li>
    <li>リスト2</li>
    <li>リストリストリスト3</li>
    <li>リスト4</li>
    <li>リストリストリストリスト5</li>
    <li>リスト6</li>
</ul>

<li>リストリスト1</li>

<li>リストリストリスト3</li>

<li>リストリストリストリスト5</li>

</ul>

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;
}

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;

}

結果

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

flexbox デモ６

<ul class="demo6">
    <li><span>リストリスト1</span></li>
    <li><span>リスト2</span></li>
    <li><span>リストリストリスト3</span></li>
    <li><span>リスト4</span></li>
    <li><span>リストリストリストリスト5</span></li>
    <li><span>リスト6</span></li>
</ul>

<li>リストリスト1</li>

<li>リストリストリスト3</li>

<li>リストリストリストリスト5</li>

</ul>

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;
}

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;

}

結果

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

flexbox デモ７

横：400px

<ul class="demo7">
    <li><span>リストリスト1</span></li>
    <li><span>リスト2</span></li>
    <li><span>リストリストリスト3</span></li>
    <li><span>リスト4</span></li>
    <li><span>リストリストリストリスト5</span></li>
    <li><span>リスト6</span></li>
</ul>

<li>リストリスト1</li>

<li>リストリストリスト3</li>

<li>リストリストリストリスト5</li>

</ul>

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;
}

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;

}

結果

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

flexbox デモ８

横：450px

<ul class="demo8">
    <li><span>リストリスト1</span></li>
    <li><span>リスト2</span></li>
    <li><span>リストリストリスト3</span></li>
    <li><span>リスト4</span></li>
    <li><span>リストリストリストリスト5</span></li>
    <li><span>リスト6</span></li>
</ul>

<li>リストリスト1</li>

<li>リストリストリスト3</li>

<li>リストリストリストリスト5</li>

</ul>

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;
}

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;

}

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

デモはコチラ

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

: 【CSS】CSSでWEBサイトのフォントを「メイリオ」にする方法

個人的に「メイリオ」フォントが好きです。WEBサイトを作る時は表示にメイリオを使うようにするので、そのタグを忘備録としてポストします。

: 【CSS】文字や画像は透過させず、背景のみ透明度を操作する方法

ボックスの透明度を操作する時に「opacity」を使うと、文字や画像までもが透過してしまうので、「background-color:rgba();」を使い、アルファ値を設定することで背景の透明度のみを操作する方法を紹介します。

: 【CSS】擬似要素を使って選択済みラジオボタンの背景色を変更する方法

以前ラジオボタンの背景色を制御するスクリプトをjQueryで作成したのですが、ラジオボタンを大量に設置するとブラウザが反応しないという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

: 【HTML】a要素（aタグ）で電話発信用リンクを設定する方法

a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。

PREV: Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト
NEXT: CakePHP2でView/Elements以下にディレクトリを追加し、共通ページを管理する方法

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

flexboxとは

リストを flexbox で横に並べる

デモはコチラ

通常リストの作成

flexboxデモ

デモ１

デモ２

flexbox デモ３

flexbox デモ４

flexbox デモ５

flexbox デモ６

flexbox デモ７

flexbox デモ８

デモはコチラ

【DIY】2x4や1x4など、SPF材サイズ早見表 (564,960)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (279,678)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (257,918)

【歴史】江戸幕府歴代将軍一覧 (143,590)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (133,246)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (131,308)