ホームへ

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

2021年10月09日

「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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

全部右寄せ

「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で全部・一部を右寄せする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ