vue根据浏览器窗口大小自适应排列多个div

<template><div class="bigBox"><div class="smallBox" :style="{'width':width}" v-for="item in 10" :key="item"><div class="contentItem">{{ item }}</div></div></div></template><script>export default {data() {return {width: '20%'};},created() {this.width = 100 / Math.trunc(window.innerWidth / 200) + '%';window.addEventListener('resize', this.reSizer);},destroyed() {window.removeEventListener('resize', this.reSizer);},methods: {reSizer() {this.width = 100 / Math.trunc(window.innerWidth / 200) + '%';}}};</script><style scoped lang="scss">.bigBox {display: flex;flex-wrap: wrap;.smallBox {padding: 10px;.contentItem {height: 200px;border: 1px solid black;}}}</style>