Html 如何使用相同顺序的flexbox创建照片网格

我有一个2行（水平）的图像网格。在初始状态下，第一行有4个图像，第二行有2个图像。用户将能够向第二个原始图像添加额外的图像。在第一行中，图像显示正确，但在第二行中，这两个图像显示在该行的开头和结尾。中间的空间变空。我附上了这两个图像

这就是我现在拥有的

这是我所期望的

间距：项目均匀分布在线路上；第一项是 在开始行，最后一项在结束行

---

更改

对正内容：空格之间到
调整内容：flex start
您的
容器库是否使用
显示：flex
？如果是这样，给它
justify content:space-between
      <div class="container-gallery">
           <div class="md-col-5 md-lg-5 col-sm-12" style="padding: 0;margin:0">
               <div class="image-grid">
                   <a href="" *ngFor="let Image of Images">
                       <img class="gallary-images" src="assets/puppy.jpg" alt="">
                   </a>
               </div>
           </div>
       </div>

  .container-gallery{
        width: percentageCalculator(870);
        .image-grid{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        .gallary-images{
            height: percentageCalculator(130);
            width: percentageCalculator(165);
            border-radius: percentageCalculator(6);
            margin-bottom: percentageCalculator(10);
            opacity: 0.7;
        }

    }