Flexboxでspace-between使用時の最後の要素の位置を指定する

Flexboxを使う時、要素の並び方を指定する「justify-content : space-between」をよく使う。
しかし最後の行のflexアイテム数によって並び方が異なるのでその辺の指定方法の覚え書き。
※各アイテムはレスポンシブで、ウィンドウ幅が縮んでもレイアウトはそのままとする

はじめに

justify-content : space-between を使うメリット（多分）

・flexアイテムにいちいちマージンを指定しなくても左右の隙間が空けられる。
flexアイテムの左右マージンを考えて配置するのが面倒だと思っている。左右マージンを指定する為、親コンテナのpaddingを調整しないといけなかったりする。またcalcを使ったりしてマージンを含めた幅を計算するのもしんどい。

なのであえて、flexアイテムの左右マージンを気にしない「justify-content : space-between」での並べ方を考えてみる。

最後の行の要素数が1つで、左寄せにしたい（デフォルト）

普通にCSSを指定する。

See the Pen VwjLGwr by yoshida (@yoshi090) on CodePen.

最後の行の要素数が1つで、中央寄せにしたい

最後の要素に「margin: 0 auto;」を指定する。

See the Pen yoshi_201012_2 by yoshida (@yoshi090) on CodePen.

最後の行の要素数が2つで、左寄せにしたい

デフォルの指定だと以下のような見た目

・こういうレイアウトはほぼ使わない。

See the Pen
yoshi_201012_3 by yoshida (@yoshi090)
on CodePen.

「justify-content:flex-start」か空要素を作る

・以下は空要素を作成する方法。

See the Pen
dyXoqvd by yoshida (@yoshi090)
on CodePen.

最後の行の要素数が2つで、中央寄せにしたい

あえて「justify-content:space-between」を指定するやり方

親コンテナ等に均等に配置したい場合など使えるかも。
普通は「justify-content:center」でflexアイテムにマージンを指定し、左右空けると思う。

See the Pen
yoshi_201012_5 by yoshida (@yoshi090)
on CodePen.

まとめ

今回のやり方は無理やりであり、一応こうやればflexアイテムの左右マージンになるべく囚われることなく配置できますよというものです。
みんなどうやってんだろ…