flex布局 justify-content：space-between出现最后一行个数不够 布局混乱

网上有很多方法是用after伪元素添加，但是有时候浏览器的大小屏导致列数不确定就不能固定添加

 解决方法:放置占位元素,占位元素宽度与其他元素宽度一直,高度为0

具体代码：

 <ul class="tag-list-wrap flex-wrap flex-hh j-between">
      <li v-for="(arr,index) in tagList" :key="index" class="tag-list-item-wrap flex-wrap a-center j-between">
           <el-checkbox :label="arr.tagId">{{arr.name}}</el-checkbox>
           <el-switch  @change="switchTag(arr.tagId,arr.showButton,index)" v-model="arr.showButton"></el-switch>
        </li> 
        <!-- 在数据最后循环占位 -->
        <li class="tag-list-item-wrap temp" v-for="(i,a) in 10" :key="'a'+a"></li>
</ul>

注意：

   循环的个数：最好是最大列数-1 

     :key="'a'+a"

        key值需要注意  错误原因一个template中有两个一样的v-for 所以需要加一个字符串来区分

 

css代码：

 .tag-list-item-wrap{
            width: 285px;
            height: 56px;
            margin-bottom: 20px;
            padding: 0 20px;
            box-sizing: border-box;
            background: #F3F6FA;
            border-radius: 4px;
            &.temp {
                height: 0;
                margin-bottom: 0;
                border: none;
                padding: 0;
            }
 }

结果