flex结合js实现卡片布局自适应

效果：当页面缩放或者改变宽度的时候，所有卡片的宽度随之改变，并保证右侧没有空白间隙,如果直接使用flex响应式，则最后一行卡片的宽度会跟上面的卡片宽度不一致或者右侧有空白间隙，该方法是根据计算父div宽度除以定义卡片的最小宽度，计算出每行最多的个数，再计算出剩余宽度，平均分给每个卡片，最后使用:style赋值宽。

html：noteListItem组件为卡片

<div class="list-total">
 <div class="listItems" id="scroll">
  <noteListItem
   v-for="(item, index) in cloudList"
   :style="{ width: resultW }"
   :key="index"
   :info="item"
  />
 </div>
</div>

js：screenWidth一定要是外部div的宽，当页面缩放的时候是根据这个宽度进行计算，页面销毁的时候要把onresize监听页面宽度去掉哦

methods:{
 csclWidths() {
  this.screenWidth =document.getElementsByClassName("list-total")[0].clientWidth;
  let number = parseInt(this.screenWidth / 380);
  // 每个卡片的宽度
  let calcWidth = (this.screenWidth - number * 20) / number - 20;
  this.resultW = calcWidth + "px";
  this.$forceUpdate();
  }
 },
 widthOffect() {
   window.onresize = () => {
     return (() => {
        this.screenWidth =document.getElementsByClassName("list-total")[0].clientWidth;
          this.csclWidths();
        })();
     }
 },
},
destroyed(){
  window.onresize=null;
}

css：

.listItems {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}