zukucode
主にWEB関連の情報を技術メモとして発信しています。

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

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

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

Flexboxの指定

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

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

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

<div style="display: flex;">
    <div style="background-color: blue;">
        ブロック1
    </div>
    <div style="background-color: yellow;">
        ブロック2
    </div>
    <div style="background-color: red;">
        ブロック3
    </div>
</div>

サイズの指定

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

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

配置方法(左右)

flex containerjustify-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;">
        ブロック1
    </div>
    <div style="width: 100px; height: 50px; background-color: yellow;">
        ブロック2
    </div>
    <div style="width: 100px; height: 80px; background-color: red;">
        ブロック3
    </div>
</div>

均等

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

配置方法(上下)

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

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

中央寄せ

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

下寄せ

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

余白

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

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

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

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

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

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

関連記事