- Flexboxで最後の1つだけ右寄せにしたい
- Flexboxで最後の1つだけ下寄せにしたい
このようなケースはサイト制作をしていると結構あります。結論、どちらもmargin
とauto
を使えば簡単に実装できます。
この記事ではサンプルを用いてFlexboxで右寄せや下寄せにする方法を紹介します。
この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。
Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!👇 メンターやってます 👇
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。
👆 メンターやってます 👆
この記事の目次
最後の 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;
}
*/
【初学者・中級者の方】独学に限界を感じてませんか?
プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。
↓このように感じていませんか?
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業するまでの道が見えない...
そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。
初級者から中級者まで対応できる、数少ないサービスです。
スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。
👆 メンターは全員現役エンジニア 👆
最後の 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の理解が必須です。基礎を学びたい方は下記の記事をご覧ください。
Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり!Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は下記の記事をご覧ください。
【CSS Grid入門】図解も交えて使い方を詳しく解説!この記事のように、知っておくと便利なFlexbox関連の記事も多数あげています。
Flexboxで均等幅(同じサイズ)で横並び配置する方法! Flexboxで画像や要素が小さくなる(潰れる)時の対処方法! Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!独学に限界を感じていませんか?
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)
当メディア運営メンバーでメンターやってます!👉
詳しく見る
0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!