flexboxのjustify-contentでspace-betweenをすると、余った要素が両端によってしまうのを直したいです。

Question

flexboxのjustify-contentでspace-betweenをすると、余った要素が両端によってしまうのを直したいです。
画面に複数の要素を横並びで4つずつ表示したいのですが、要素が6つある場合に、flexboxのjustify-content: space-between
を使うと、最後の2つが両端に寄ってしまいます。
表示する個数が動的に変わるため、afterやbeforeでから要素を入れるのは現実的ではないと思っているのですが、何かいい方法がありましたら教えて頂けないでしょうか？

下記がスタイルになります。
よろしくお願いいたします。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  .item {
    flex: 0 0 calc(160 / 700 * 100%);
    box-sizing: border-box;
  }
}

Answer 1

space-around なり、space-evenly なりを使ってください
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

-- 18:11 Grid layout を追記

@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(160 / 700 * 100%));
    justify-content: space-around;
  }
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

Answer 2

このように修正すれば最後の2つが両端に寄らないです。
(emの数値は任意)

<div class="wrapper">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  <div class="item">item05</div>
  <div class="item">item06</div>
</div>

body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper .item {
  flex: 0 1 calc(25% - 1em);
  margin: 0.5em;
  padding: 1em;
  box-sizing: border-box;
  background: skyblue;
}