【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】backgroundプロパティのまとめ

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。

: WEBアイコンフォントの font-awesome を背景として指定する方法

WEBアイコンフォントで有名な「font-awesome」のアイコンをh1などの標題で使う際、各ページの標題に埋めるのもメンテナンスが大変なので背景に出来ないかと思ったので、その方法を備忘録としてポストします。

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

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

: ログイン画面デザイン100選

ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト（しかも2009年）の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。

: HTML5 videoタグで背景に動画を使ったページを作る方法

背景に動画を使うサイトをよく見受けられるようになってきました。どうやって作って ...

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,962)

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

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

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

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

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