Flexboxでwrapとbetweenとstartを併用させたい

やりたいこと

2行以上ありうるのでflex-wrapする

paddingを均等に分けたいので、space-betweenしたい

2行目以降も左揃えにしたい

タイトルが変mrsekut.icon

こんなふうにしたい

https://gyazo.com/bb73f329249d553dd002ae22daf752e0

画像はこのPlaygroundのスクショ

1つ1つのItem widthは19%にしている

https://gyazo.com/79e3f242095853e071b6a2238b849155

code:css

flex-wrap: wrap;

justify-content: space-between;

https://gyazo.com/9c6f70476586857e1e9525ff7d2a153e

code:css

flex-wrap: wrap;

justify-content: flex-start;

1段目の右に隙間ができてしまう

こんなふうにしたい

https://gyazo.com/bb73f329249d553dd002ae22daf752e0

code:css

.container {

display:flex;

flex-wrap: wrap;

justify-content: normal;

}

.item {

width: 15.8%;

margin: 0 1.5% 10px;

flex-basis: 17%;

}

flex-basisで横幅を指定している

このケースでは画像なのでwidthが決まっているためspace-betweenを使わなくても良い感じになっているように見える

たまたまいけてるだけなのか、汎用的にできるものなのかわかっていない #??

ちゃんと見ていないmrsekut.icon

flexの指定だけでどうにかできないものか

これでも良い気もする