html - CSS Flexbox : wrap item tile grid, 每行指定元素？

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-th-child，但不确定将它用于 flex 元素的最佳方式。

Answer 1

您不能强制 flexbox 换行，因为它没有网格功能。您最多可以使用“flex: 0 0 20%”将每个 flex-item 的宽度固定为 20%。但我建议将每个图像包装在一个 div 中，因为它们在 flexbox 下会产生意想不到的结果。

Codepen Demo

.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;
}

<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>