flex 多行平均分布

<template>
<view>
<view class="__y-file-list">
<view class="__y-file" v-for="item in 9">
<image class="__y-image" src="../../static/img/missing-face.png" mode=""></image>
<view class="__y-close-btn">
<text class="cuIcon-close __close-icon"></text>
<!-- <image src="./static/close.png" mode=""></image> -->
</view>
</view>
<!-- <view class="file" v-for="(v, i) in previewImgList" :key="i">
<u-image width="150rpx" height="150rpx" class="img" :src="v" mode="" borderRadius="8"
@click="previewImage(i)">
<view slot="loading">
<u-loading mode="circle"></u-loading>
</view>
</u-image>
<u-icon name="../../static/qqhd/close.png" width="32" height="32" size="32" class="close"
color="#ffffff" @click="deleteImg(i)"></u-icon>
</view>
<view class="upload-btn" @click="chooseImage">
<view class="icon-bg">

</view>
</view> -->
</view>
</view>
</template>

<script>
export default {
name:"yiyun-upload",
data() {
return {

};
}
}
</script>

<style lang="scss" scoped>
.__y-file-list{
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
// 占位符，靠它实现平均
&:after{
content: '';
height: 0;
width: 30%;
}
.__y-file {
flex: 0 0 30%;
margin-top: 24rpx;
// margin-right: 24rpx;
position: relative;
width: 150rpx;
height: 150rpx;

.__y-image{
width: 100%;
height: 100%;
overflow: hidden;
}
.__y-close-btn{
// width: 60rpx;
// height: 60rpx;
position: absolute;
top: 0;
right: 0;
.__close-icon{
background-color: #999;
border-radius: 50%;
font-size: 38rpx;
padding: 6rpx;
color: #FFFFFF;
}
}
}
}
</style>