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

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

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

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

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

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

実装サンプル

実装サンプルです。

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です。

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

以上で実装完了です。

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

解説を終わります。