flex列表布局

在进心列表渲染的时候，要使列表有间隔且分散均匀

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>