项目中有碰到一列 3 个及以上的 多行布局
设置 justify-content: space-between; 后 如果满格 就是正常显示，如果最后一行少1个就会出现 两头布局，影响美观。
做一个解决这种问题的样式
css
.position-view,.size-view{ width: 150upx; margin: 10upx 0; } .size-view{ padding: 12upx; font-size:28upx; font-weight:400; color:rgba(124,124,124,1); line-height:40upx; border: 1upx solid rgba(151,151,151,1); border-radius:8px; } .position-view{ content: ''; }样式很简单 就是一个 占位 的view
在盒子尾部 加上一个 占位 的view 循环次数 就是要循环数组的长度 / 你准备显示的列数，多少列都适用
<view class="position-view" v-for="indexs in (parseInt((sizeList.length+1)/4))" :key="indexs"></view> <template> <view> <view class="main-view mar-t20 pad20"> <view class="flex-cb border-bot"> <view class="">尺寸</view> <view class="">编辑</view> </view> <view class="size-list"> <view class="size-view flex-cc" v-for="(item,index) in sizeList" :key="item.name"> {{item.name}} </view> <view class="size-view flex-cc" v-if="isadd"> <input type="text" value="" placeholder="输入" v-model="inputAdd"/> </view> <view class="size-view flex-cc" @tap="add"> 新增 </view> <view class="position-view" v-for="indexs in (parseInt((sizeList.length+1)/4))" :key="indexs"></view> </view> <view class="but-view flex-ca pad20" v-if="isadd"> <view class="flex-cc" @tap="addVal"> 确定 </view> <view class="flex-cc" @tap="closeAdd"> 取消 </view> </view> </view> </view> </template> <script> export default { data() { return { sizeList:[ {id:1,name:'S'}, {id:2,name:'M'}, {id:3,name:'L'}, {id:4,name:'XL'}, {id:5,name:'XXL'}, {id:6,name:'3XL'}, {id:7,name:'4XL'}, {id:8,name:'5XL'}, ], isadd:false, isdel:false, inputAdd:'', } }, methods: { add(e){ this.isadd = true; }, addVal(e){ if(this.inputAdd != ''){ this.sizeList.push({id:this.sizeList.length,name:this.inputAdd}) } this.inputAdd = ''; //this.isadd = false; }, closeAdd(e){ this.inputAdd = ''; this.isadd = false; } } } </script> <style> .main-view{ background-color: #FFFFFF; } .size-list{ display: flex; align-items: flex-start; justify-content: space-between; align-content: flex-start; flex-wrap: wrap; } .position-view,.size-view{ width: 150upx; margin: 10upx 0; } .size-view{ padding: 12upx; font-size:28upx; font-weight:400; color:rgba(124,124,124,1); line-height:40upx; border: 1upx solid rgba(151,151,151,1); border-radius:8px; } .position-view{ content: ''; } .but-view view{ background-color: #007AFF; color: #FFFFFF; padding: 10upx; border-radius: 20upx; width: 200upx; } input{ font-size:28upx; font-weight:400; line-height:40upx; text-align: center; } </style>
