<template>
<view class="box" >
<view v-for="item in 4" :key="item">{{item}}</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.box{
background-color: lavender;
display: flex;
flex-flow: wrap;
justify-content: space-between;
// 此属性兼容性不太好，可用margin替代， 注意对两端进行margin重置处理。（2023年7月12日09:30:04）
gap: 10rpx;
margin-inline: 30rpx;
&>view{
// 这里设置为flex：none 即为0 0 auto 既不放大也不缩小 宽度为自适应内容
flex: none;
// 宽度通过calc动态计算减去间隔 2列即为50% 3列越为33% 4列为25% 以此类推
width: calc(50% - 10rpx);
aspect-ratio: 1;
background-color: lightblue;
}
}
</style>
