【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 プログラミング

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

2022.03.13
2499
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
293
HTMLCSS プログラミング

【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】

2022.03.28
46
HTMLCSS プログラミング

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
470