【CSS】flexで両端、左右に分ける方法【3つ以上も可能】

「flexで2つを左右に分けるのどうやるんだっけ？」

「3つ以上横並べしたときはどうやって左右に分けるの？」

display:flexで両端、左右に分ける方法を解説します。

display:flexの基本はこちら↓

2つを左右に分ける

display:flexを指定した要素に「justify-content: space-between」を指定します。

• 左
• 右

<style>
.example{
    display: flex;
    /*コレ*/justify-content: space-between;
    padding: 5px;
    border: 1px solid #999;
    background: #ebfdfc;
}
.example>li{
    border: 1px solid #999;
    padding: 10px 30px;
    margin: 0;
    list-style: none;
    background: #FFF;
    text-align: center;
}
</style>
<ul class="example">
    <li>左</li>
    <li>右</li>
</ul>

justify-contentはflexとセットで使い、子要素の横の位置を指定するCSSです。

justify-content: space-betweenは子要素の最初と最後を両端に寄せます。

ただし、子要素が3つ以上になると残りの子要素は等間隔で配置され左右にはわかれません。

3つ以上を左右に分けるには一工夫必要です。

3つ以上を左右に分ける

子要素の分ける部分を「:nth-of-type(n)」で指定し、「margin-right: auto」または「margin-left: auto」を指定します。

• 1
• 2
• 3
• 4

<style>
.example2{
    display: flex;
    padding: 5px;
    border: 1px solid #999;
    background: #ebfdfc;
}
.example2>li{
    border: 1px solid #999;
    padding: 10px 30px;
    margin: 0;
    list-style: none;
    background: #FFF;
    text-align: center;
}
.example2>li:nth-of-type(2){
    margin-right: auto;
}
</style>
<ul class="example2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

「:nth-of-type(n)」は何番目か指定できるセレクタです。

「li:nth-of-type(2)」と指定すると上から（左から）2番目のliを指します。

これに「margin-right: auto」を指定します。

「margin-right」は右の空白です。これをautoにすると空白を最大まで広げます。

上記の場合は2番目の右の空白を押し広げることで3番目以降が右に押し込まれ、左右に分かれたということです。

ちなみに「3つ以上」ではなく、1つのときでも可能です。

【まとめ】flexで左右に分ける方法

2つを左右に分ける

display:flexを指定した要素に「justify-content: space-between」を指定します。

3つ以上を左右に分ける

子要素の分ける部分を「:nth-of-type(n)」で指定し、「margin-right: auto」または「margin-left: auto」を指定します。

以上、display:flexで両端、左右に分ける方法でした。