仿蓝湖布局，避免自适应卡片列表页面留白过多

先上图，最终实现效果
希望实现的效果：根据屏幕宽度自适应，并且在右边留白过多的情况下，将整体内容居中。
之所以会做这个，如下图。是因为当magin存在的时候，视觉上看起来在右边完全还可以放下一个卡片，但是实际它的宽度已经不足够再放下一个card了。
最终参考蓝湖的布局，当页面宽度留白太多的时候，处理了居中。但是这样需要计算很特别多重情况，很容易忽视一些特殊情况。并且居中的时候，内部的div会自动填充为100%，需要dom操作去修改内层(home-main)的宽度,才能实现flex的居中

<div ref="mainWrap" class="main-wrap">
  <div ref="main" class="home-main ">
    <g-empty-tip-card v-if="productList.length<=0" v-loading="" @add="handleAdd" />
    <g-product-card
      v-for="(item,index) in productList"
      v-else
      :key="index"
      :name="item.name"
      :pic="item.pic"
      :version="item.version"
      :rate="item.rate"
      @toParticula="toParticula(item.id)"
    />
  </div>
</div>

经过优化后，先计算mainWrap的宽度 足够放下多少个card，再将home-main的宽度设置为改宽度，就可以实现flex的居中了。但此时又有了一个问题，如果数量很少，居中了就很难看，所以多做了一步判断，是否一行可以放下所有的card，代码如下

  window.onresize = () => {
    return (() => {
      this.countWidth()
    })()
  }


countWidth() {
  const wrapWidth = window.getComputedStyle(this.$refs.mainWrap).width
  const num = Math.floor(parseInt(wrapWidth) / 320)
  if (this.productList.length > num) {
    this.$refs.mainWrap.classList.add('flex-c-c')
    this.$refs.main.style.width = num * 320 + 'px'
  } else {
    this.$refs.mainWrap.classList.remove('flex-c-c')
    this.$refs.main.style.width = wrapWidth
  }
}

最终的效果就是 当一行放的下的时候，就不再居中，如果放不下，根据每行可放下的card数量进行改变内层div的宽度来进行居中。这样就不会使得两边留白过多，产生视觉误会。