CSS Flexbox：包装项目平铺网格，每行指定项目？

Question

我有一个包含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>

我将封闭的div设为flexbox：

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

按预期方式执行：

但是我宁愿在每第5个项目之后换行到下一行。我知道第n个孩子，但我不确定将它用于弹性物品的最佳方式。

Answer 1

由于没有网格功能，您无法强制使用Flexbox包装。最好你可以使用＆flex; 0 0 20％＆＃39;将每个弹性项目的宽度固定为20％但是我建议将每个图像包装在一个div中，因为它们有意想不到的结果在flexbox下。

Codepen Demo

＆＃13;

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 20%;
  text-align: center;
  margin-bottom: 1em;
}
img {
  max-width: 100%;
  min-width: 0;
  height: auto;
}

＆＃13;

<div class="container">
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
  <div class="box">
    <img src="http://placekitten.com/100/100" alt="" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;