Written by Kasumi

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

CSSのflexboxを使って、均一な横並び要素を実現している。

均一な横並び要素の最後の要素だけ右寄せにしたい。

もしくは最初の要素だけ左寄せにしたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
flexbox 最後の要素右寄せ
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

flexboxを使って、最後の要素だけ右寄せ・最初の要素だけ左寄せを実現しています。

実装方法は以下の通りです。

最後の要素だけ右寄せ

/* 最後の要素だけ右寄せ */
.flex {
  display: flex;
  justify-content: space-between;
}

.flex .item:last-child {
  margin-left: auto;//最後の要素だけ右寄せ
}

前提として均一な横並び要素にする場合は直近の親要素にdisplay: flex;justify-content: space-between;を付与します。

最後の要素だけ右寄せにする場合は、margin-left: auto;を最後の要素に付与すればOKです。

最初の要素だけ左寄せ

/* 最初の要素だけ左寄せ */
.flex {
  display: flex;
  justify-content: space-between;
}

.flex .item:last-child {
  margin-right: auto;//最後の要素だけ右寄せ
}

最初の要素だけ左寄せにする場合は、margin-right: auto;を最初の要素に付与すればOKです。

前章とは真逆の処理をして上げれば良いですね。

まとめ

以上で実装完了です。

ぜひ参考にしてみてください。

解説を終わります。

目次

関連記事

HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
1290
HTMLCSS プログラミング

【簡単】htmlでpdfファイルを表示・ダウンロードする方法【表示されない場合の解決方法も伝授】

2022.03.23
2789
HTMLCSS

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
300
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
232