【CSS】display:flexで右寄せする方法(全部または一部)

「flexを使うと右寄せできるらしいけど、どうやるんだっけ？」

「flexで最後の1つだけ右寄せしたい！」

display:flexで全部または一部を右寄せする方法を解説します。

両端に寄せたい場合はこちら↓

通常（指定なし）

下記は指定していない、つまり左寄せの状態です。これを右寄せします。

<style>
.example{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
}
.example>div{
    border: 1px solid #999;
    padding: 5px;
    background: #FFF;
}
</style>
<div class="example">
    <div>一番左</div>
    <div>二番目</div>
    <div>真ん中</div>
    <div>四番目</div>
    <div>一番右</div>
</div>

全部右寄せ

「justify-content: flex-end」を指定します。

<style>
.example2{
    display: flex;
    /*コレ*/justify-content: flex-end;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
}
.example2>div{
    border: 1px solid #999;
    padding: 5px;
    background: #FFF;
}
</style>
<div class="example2">
    <div>一番左</div>
    <div>二番目</div>
    <div>真ん中</div>
    <div>四番目</div>
    <div>一番右</div>
</div>

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

「justify-content: flex-end」を指定すると終わり側寄せ、つまり右寄せになります。

justify-contentが効かない場合はこちら↓

最後だけ右寄せ

最後の要素に「margin-left: auto」を指定します。

<style>
.example3{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
}
.example3>div{
    border: 1px solid #999;
    padding: 5px;
    background: #FFF;
}
.example3>div:last-of-type{
    margin-left: auto;
}
</style>
<div class="example3">
    <div>一番左</div>
    <div>二番目</div>
    <div>真ん中</div>
    <div>四番目</div>
    <div>一番右</div>
</div>

ブロック要素に対して「margin-left: auto」を指定すると右寄せにできます。flexでなくても効きます。

「margin-left」は左側の空白です。これをauto指定すると最大まで空白が広がります。

これにより右寄せになります。

最後の要素を指定するには「:last-of-type」または「:last-child」を使います。

最初以外右寄せ

最初の要素に「margin-right: auto」を指定します。

<style>
.example4{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
}
.example4>div{
    border: 1px solid #999;
    padding: 5px;
    background: #FFF;
}
.example4>div:first-of-type{
    margin-right: auto;
}
</style>
<div class="example4">
    <div>一番左</div>
    <div>二番目</div>
    <div>真ん中</div>
    <div>四番目</div>
    <div>一番右</div>
</div>

ブロック要素に対して「margin-right: auto」を指定すると左寄せにできます。flexでなくても効きます。

「margin-right」は右側の空白です。これをauto指定すると最大まで空白が広がります。

二番目以降はmargin-rightに押し込まれて右に寄せられています。

最後の要素を指定するには「:first-of-type」または「:first-child」を使います。

特定の要素以降右寄せ

特定の要素に「margin-left: auto」を指定します。

<style>
.example5{
    display: flex;
    border: 1px solid #999;
    padding: 5px;
    background: #daf0f2;
}
.example5>div{
    border: 1px solid #999;
    padding: 5px;
    background: #FFF;
}
.example5>div:nth-of-type(3){
    margin-left: auto;
}
</style>
<div class="example5">
    <div>一番左</div>
    <div>二番目</div>
    <div>真ん中</div>
    <div>四番目</div>
    <div>一番右</div>
</div>

特定の要素を指定するには「:nth-of-type(n)」を使います。この「n」の部分に数値を入れて指定します。

この要素に「margin-left: auto」を指定すると左側の空間を押し広げ右寄せになります。この要素より右にある要素も押されて右寄せになります。

ちなみに、「:nth-of-type(n)」の「n」を「1」にすると「全部右寄せ」、「2」にすると「一番左以外右寄せ」、「5」にすると「一番右だけ右寄せ」も可能です。

「:nth-of-type(n)」のようにクラスをつけずに特定の要素を指定するセレクタを「擬似クラス」といいます。

擬似クラスはたくさんありますので、下記にてご確認ください。

【まとめ】flexで右寄せする方法

• 全部右寄せ「justify-content: flex-end」
• 最後だけ右寄せ「:last-of-type」に「margin-left: auto」
• 最初以外右寄せ「:first-of-type」に「margin-right: auto」
• 特定の要素以降右寄せ「:nth-of-type(n)」に「margin-left: auto」

以上、display:flexで全部・一部を右寄せする方法でした。