justify-contentで左寄せ

Flex-box

floatに振り回されて疲れた私達の救世主だと思っているんですけど
一番気に入ってるjustify-content:space-between;
一つだけ気になるのが、左寄せ問題ですね。
もうナンノコッチャわかっている前提で話進めるとして
以下コード


↓↓　横3つ並び前提でサンプルコード　↓↓

HTML

<div class="wrap">
 <div class="wrap__items">item1</div>
 <div class="wrap__items">item2</div>
 <div class="wrap__items">item3</div>
 <div class="wrap__items">item4</div>
 <div class="wrap__items">item5</div>
</div>

CSS

.wrap{
 padding:10px;
 display : flex;
 flex-wrap : wrap;
 justify-content:space-between;
}
.wrap::after{
 content:"";
 display: block;
 width:30%;
}
.wrap__items{
 padding:10px;
 margin:0 0 10px;
 width:30%;
}

まぁこんな感じで最後のやつも左寄せになるんですけど、どこでそれやってんのかってとこだけ

.wrap::after{
 content:"";
 display: block;
 width:30%;
}

これですね
widthのとこは任意調整してあわせていただきたい
並べてる子たちの親wrapの最後に子と同じwidthの空欄を忍ばせてあるから
その分左に寄るってことですね

これやっとくだけで横3つになったら::afterの空欄も下の段に移動するんで
普通に子が増えてもきれいに左寄せのまま進行するので
とっても幸せです。