Html CSS Flexbox：包裹项目平铺网格，是否为每行指定项目？

我有一个包含20个项目的div：

       <div class="brand-illustrations">
          <img src="modules/foundation/assets/images/pb_brand_icons_01_Shipping.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_02_Time_Savings.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_03_Increase.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_04_Decrease.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_05_Money.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_06_Money_Savings.svg">
          <img src="modules/foundation/assets/images/pb_brand_icons_07_Accuracy.svg">
          ...etc...
        </div>

正如预期的那样：

但我更愿意在每第五项后换行。我知道n-th-child，但不确定将其用于flex项目的最佳方式。

您不能强制flexbox包装，因为它没有网格功能。您最多可以使用“flex:020%”将每个flex项的宽度固定为20%…但我建议将每个图像包装在一个div中，因为它们在flexbox下有意外的结果

.container{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.盒子{
弹性：0.20%；
文本对齐：居中；
边缘底部：1米；
}
img{
最大宽度：100%；
最小宽度：0；
高度：自动；
}

.brand-illustrations {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   img {
     display: block;
   }
}