• Flexboxで最後の1つだけ右寄せにしたい
• Flexboxで最後の1つだけ下寄せにしたい

このようなケースはサイト制作をしていると結構あります。結論、どちらもmarginとautoを使えば簡単に実装できます。

この記事ではサンプルを用いてFlexboxで右寄せや下寄せにする方法を紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【学べること】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

最後の 1 つだけ右寄せにしたい！

上の図のように、最後の要素だけ右寄せにしたい場合のコード紹介と解説をします。

コード紹介

<header class="header">
    <h1 class="header-logo">
        <img src="logo.png" width="..." height="..." alt="..." />
    </h1>
    <div class="header-search">...</div>
    <button class="header-user-icon">
        <img src="logo.png" width="..." height="..." alt="..." />
    </button>
</header>

.header {
    display: flex;
    ...
}

.header-user-icon {
    margin-left: auto;
}

このようにheader-user-iconに対して、margin-left: auto;を指定するだけです。.header-searchに対してmargin-right: auto;でも良いです。

最後の1つに限らず使える

この方法は最後の1つに限らず使えます。

いくつか例を紹介します。

.flex-item:nth-child(4){
    margin-left: auto;
}

/*
下記でも同じ
.flex-item:nth-child(3){
    margin-right: auto;
}
*/

.flex-item:nth-child(3){
    margin-left: auto;
}

/*
下記でも同じ
.flex-item:nth-child(2){
    margin-right: auto;
}
*/

.flex-item:nth-child(2){
    margin-left: auto;
}

/*
下記でも同じ
.flex-item:nth-child(1){
    margin-right: auto;
}
*/

最後の 1 つだけ下寄せににしたい！

上の図のように、文章の長さが異なると、最後の要素の横のラインが揃いません。

この解決もmarginとautoを使います。

コード紹介

<div class="card">
    <section class="card-item">
        <h3 class="card-title">web制作</h3>
        <p class="card-description">テキスト...</p>
        <a href="..." class="card-button">詳しく見る</a>
    </section>

    <section class="card-item">
        <h3 class="card-title">web制作</h3>
        <p class="card-description">テキスト...</p>
        <a href="..." class="card-button">詳しく見る</a>
    </section>
</div>

.card-item {
    display: flex;
    flex-direction: column;
    ...
}

.card-button {
    margin-top: auto;
}

ポイントは.card-itemに対して、display: flex;を指定し、flex-direction: column;で縦方向に並べることです。これがないと、ただ.card-buttonにmargin-top: auto;を指定しても思うようにいきません。

このケースも最後の1つに限らずに使えます。

また、margin-bottomでも同じように実装できるので、.card-descriptionに対して、margin-bottom: auto;でも同じ見た目になります。

他にも関連の記事を上げています！

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。

この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！