在进心列表渲染的时候,要使列表有间隔且分散均匀
justify-content: space-between; 在遇到数据不够的情况下,最后一排会排版错误
解决方案大家可以参考:
:style="(index+1) % 5 == 0?'padding-right:0':''" 这里我是每行5个,主要代码就是这行
<template>
<div class="wrap">
<ul>
<li v-for="(item,index) in list" :key="item.id" :style="(index+1) % 5 == 0?'padding-right:0':''"><p></p></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list:[
{id:1},
{id:2},
{id:3},
{id:4},
{id:5},
{id:6},
{id:7},
{id:8}
]
}
},
}
</script>
<style lang="scss" scoped>
.wrap{
padding-top: 50px;
}
ul{
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
li{
width: 20%;
height: 150px;
background: red;
padding-right: 12px;
p{
width: 100%;
height: 100%;
background: #ccc;
}
}
li{
box-sizing: border-box;
padding-bottom: 10px;
}
}
// 如果有固定尺寸,可以把padding改为margin
</style>