flex 布局一行两个超出自动换行

template

<div class="card_wrap">
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
          <div class="c_item">
            1
          </div>
  </div>

style

.card_wrap {
      // 大盒子
      width: 98%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start; // 替代原先的space-between布局方式
    }
    .c_item {
      // 每个item
      flex: 1;
      height: 120px;
      margin: 0 5px 5px 0; // 间隙为5px
      background-color: #fff;
      width: calc(
        (100% - 10px) / 2
      ); // 这里的10px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
      &:nth-child(2n) {
        // 去除第2n个的margin-right
        margin-right: 0;
      }
    }