【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です。
前章とは真逆の処理をして上げれば良いですね。
まとめ
以上で実装完了です。
ぜひ参考にしてみてください。
解説を終わります。
目次