这种布局方式 通常父级item 使用display:flex; 子集list使用margin-right margin-bottom撑开距离 然后得纠结最后一个子集的margin什么的
有个新思路子集使用padding
<div class="video-box"><div class="video-list" v-for="item in videoList.list" :key="item.video_id"><div class="video-list-cont"><el-checkbox v-model="item.checked" class="c1"></el-checkbox><div class="video-img-wrap"><img :src="item.video_cover_url" alt="" class="video-img" /></div><div class="d1"><span class="s1">{{ item.width }}x{{ item.height }}</span><span class="s2">{{ item.duration }}</span></div></div><div class="video-footer">{{ item.file_name }}</div></div></div>.video-footer{ font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.video-list-cont .s1,.video-list-cont .s2{ padding: 0 6px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid hsla(0,0%,100%,.5); border-radius: 8px;}
.video-list-cont .d1 .s2{ margin-left: 4px;}
.video-list-cont .d1{ position: absolute; bottom: 4px; left: 0; display: flex; width: 100%; justify-content: center;}
.video-list .c1{ position: absolute; top: 8px; right: 8px;}
.video-img{ width: 100%; height: 100%;}
.video-img-wrap{ width: auto; height: 174px;}
.video-list-cont{ position: relative; display: flex; justify-content: center; background: #f2f2f2; font-size: 12px; cursor: pointer; border-radius: 4px;}
.video-list{ padding: 6px; width: 20%; box-sizing: border-box;}
.video-box{ padding: 0 10px; display: flex; flex-wrap: wrap;}