CSS flexboxであらゆる要素を横並びで表示する

あらゆる要素を横並びで表示する方法を紹介します。

一昔前までは要素を横並びにするにはflot: leftが使われていましたが、使い勝手悪く、今ではflexboxを使うことが多いです。

Flexboxの指定

以下のように、親要素にdisplay: flexのスタイルを適用すると、親要素はflex containerとなり、子要素はflex itemとなります。

div要素はブロック要素ですので、本来は１つのdivごとに改行されますが、flex itemとなっているので、横並びで表示されています。

各div要素の中身を任意のレイアウトで実装すれば、簡単に横並びのデザインを作成することが可能になります。

<div style="display: flex;">
    <div style="background-color: blue;">
        ブロック１
    </div>
    <div style="background-color: yellow;">
        ブロック２
    </div>
    <div style="background-color: red;">
        ブロック３
    </div>
</div>

サイズの指定

以下のようにサイズを指定することも可能です。

<div style="display: flex;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

配置方法（左右）

flex containerにjustify-contentのスタイルを指定すると、中央寄せや均等に配置するなどの左右の配置方法の指定が可能です。

normal: 通常
center: 中央寄せ
flex-start: 左寄せ
flex-end: 右寄せ
space-around: 均等
space-between: 均等（先頭と末尾の要素はそれぞれ端に配置）

中央寄せ

<div style="display: flex; justify-content: center;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

均等

<div style="display: flex; justify-content: space-around;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

配置方法（上下）

flex containerにalign-itemsのスタイルを指定すると、中央寄せや均等に配置するなどの上下の配置方法の指定が可能です。

normal: 通常
center: 中央寄せ
flex-start: 上寄せ
flex-end: 下寄せ

中央寄せ

<div style="display: flex; align-items: center;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

下寄せ

<div style="display: flex; align-items: flex-end;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

余白

各flex itemの間に余白を設けたい場合は、marginを指定します。

左に50pxの余白を設けたい場合はmargin-left: 50pxのスタイルを指定します。

<div style="display: flex;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow; margin-left: 50px;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>

margin-left: autoを設定すると、flex containerの余っている領域分の余白を設けることができます。

これで指定したflex item以降を右寄せにすることができます。

<div style="display: flex;">
    <div style="width: 200px; height: 100px; background-color: blue;">
        ブロック１
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow; margin-left: auto;">
        ブロック２
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック３
    </div>
</div>