具有Flexbox和动态内容的CSS网格

Question

我正在使用div在三列网格中排列flex。当div的数目是3的倍数时，一切正常（示例1）。但是，如果div的数量大约为5，则各列之间的间隔较大（情况2）。如果我切换到justify-content-start（或justify-content: flex-start;），它将接近我想要的位置，但是右侧边缘会出现小间隙（东西不会从一端延伸到另一端）灰色框）。有没有办法使动态数量为div的这项工作？

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);

   

<style>
  .box {
    width: calc(33vw - 25px);
    height: 15px;
    margin-bottom: 25px;
  }
</style>

<div class="border border-secondary w-90 m-auto">
<div class="bg-primary m-auto w-100" style="height: 10px;"></div>

<h1>Case 1</h1>
<div class="d-flex flex-row flex-wrap justify-content-between">
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
</div>
<h1>Case 2</h1>
<div class="d-flex flex-row flex-wrap justify-content-between">
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
  <div class="box border border-primary"></div>
</div>
</div>