【CSS】一行显示固定个数，超出部分自动换行

问题场景

1. 总个数不受限制
2. 一行显示n个，多出的部分以此换行到下一行显示
3. 盒子宽度随屏幕宽度变化而变化
4. 总数不是n的倍数时，居左展示

解决

思路

1. 父元素使用flex布局，不设置宽度，让子元素去撑大，并设置自动换行
2. 子元素高度固定，宽度按如下公式计算，并将第n倍数个的外边距去除

（100% - 一行总外边距）/ n个

代码

• html

  <div class="swiper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

• css

 .swiper {
   width: 98%;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 .item {
   width: calc((100% - 10px) / 3); // 10px = 前两个外边距和
   height: 120px;
   margin:0 5px 5px 0;
   background-color: aqua;
 }
 .item:nth-child(3n) {
   margin-right: 0;
 }