模写修行メディア

Flexboxで最後の1つだけ右寄せや下寄せにする方法!

※ 当サイトの記事には、広告を含む場合があります。

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

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

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

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

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

私たちが運営している、現役エンジニアによるメンタリングサービス:Hello Mentorは、1人1人にオーダーメイドでロードマップを作成しています。

web制作/web開発/デザインまで、経験豊富な現役エンジニアがメンターをします。

  • 検索しても解決しない問題が多い...
  • 勉強方法や目指す方向が合っているか不安...
  • 転職・独立できるのか不安...
  • SNS等で情報が多すぎて何が本当かわからない...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

プロのサポートで3倍速でスキルアップ!

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

この記事の目次

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

最後の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つに限らず使えます。

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


最後の1つを右寄せにした図
.flex-item:nth-child(4){
    margin-left: auto;
}

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

最後の2つを右寄せにした図
.flex-item:nth-child(3){
    margin-left: auto;
}

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

最後の3つを右寄せにした図
.flex-item:nth-child(2){
    margin-left: auto;
}

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

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

最後の1つだけ下寄せにしたい場合の例

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

この解決もmarginautoを使います。

コード紹介

<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-buttonmargin-top: auto;を指定しても思うようにいきません。

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

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

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

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

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

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

【CSS Grid入門】図解も交えて使い方を詳しく解説!

この記事のように、知っておくと便利なFlexbox関連の記事も多数あげています。

Flexboxで均等幅(同じサイズ)で横並び配置する方法! Flexboxで画像や要素が小さくなる(潰れる)時の対処方法! Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!

【プログラミンング学習中の方へ!】独学の非効率さを解消して3倍速でスキルアップしませんか?

Hello Mentor(ハローメンター)
Hello Mentor(ハローメンター)

プログラミングは独学可能です。このメディアを運営しているメンバーも独学で勉強してきました。ただし、独学には大きな問題があります。

独学は下記の5つの点でとても非効率です!

  • 最適な学習計画が立てられない
  • 正しい教材の選定ができない
  • 間違った方向に進んでいる可能性がある
  • 必須スキルの欠落に気づかない
  • 30分以上悩むのは時間の無駄

この問題を解決するために、現役エンジニアによるメンタリングサービスHello Mentor(ハローメンター)を始めました。

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

プログラミングスクールのように高額な料金はかかりません。少しの投資で圧倒的に学習を効率化したい方は、ぜひ下記のリンクからサービスサイトをご覧ください。

あなた専用のロードマップを作成!

メンタリングの内容を見てみる

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

web制作ロードマップ解説動画プレゼント👉

LINE登録でGET

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材