とりあえずの結論

折り返しする場合は、space-betweenを使わず子要素のpaddingで調整すると便利かもしれない
※デメリットはdivが増えてしまうこと

See the Pen space-between 3 by eights-net (@eights_net) on CodePen.

space-between

要素を均等に並べるときにとても便利

See the Pen space-between by eights-net (@eights_net) on CodePen.

複数行になったとき flex-wrap: wrap を使って折り返しをした場合、
要素数によって左寄せにならない問題

See the Pen space-between 2 by eights-net (@eights_net) on CodePen.

カラム数によって疑似要素や空divを置いたりjsで追加したりして調整していたが、
CMSなどで要素の数が変わったり、「カラム数を3から4に変更で」なんて言われたりするととてもつらい

そもそも space-between を使わず子要素の余白で均等にしようという本末転倒？の解決法

子要素に直接 margin をつけてもいいが width を調整しないといけないので、
子要素を囲う div を作り、その囲いの左右padding と width を設定することで均等にしよう作戦

See the Pen space-between 3 by eights-net (@eights_net) on CodePen.

子要素(.item) を囲う div(.item-wrap) を用意し、その div の padding で余白を取り、width をつける
- 通常の flexbox だけで作るより div が増えてしまう点はデメリット
- 子要素に背景色を付けたい場合は .item-wrap ではなく .item に付ける
div(.item-wrap) の width は3カラムの場合 calc(100% / 3) で指定する。4カラムの場合は calc(100% / 4)
- 100%をカラムで割るだけなのでカラム数が変更になった場合も修正が簡単
div(.item-wrap) の padding は余白を取りたい幅の半分を左右に付ける
- 30pxの余白が欲しい場合は padding: 0 15px;
親要素(.container) に子要素の padding と同じ値を -margin をつけて子要素のはみ出しを打ち消す
- 余白が30pxの場合は margin: 0 -15px;
- -margin を付けても子要素の幅は飛び出したままなので取り扱い注意
- その場合は overflow: hidden; するといいかもしれない
親要素(.container)には幅を指定せず、指定したい場合はさらに親(.container-wrap)で指定する
- 親要素に直接指定すると崩れてしまうのでその場合も div が増えてしまうデメリットがある

divは増えてしまいますが変更には強いのでオススメです
基本的には Bootstrap の flex grid を参考にしています
ミスなどあればご指摘お願いいたします