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

safariブラウザだけCSSプロパティを適用する方法

2023.03.14
6436
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
6316
HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
1566
HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
1598