这是我想实现的效果
这是实际的效果
如图,一行不够四个元素的话间距就乱了
这是我的vue页面代码
<div class="allVideo">
<div v-for="item in file" :key="item.id" class="video"
@click="item.type=='pdf'? toPdf(item.src):toVideo(item.id,item.title,item.src)">
<div class="imgContainer"><img :src="item.cover" alt=""></div>
<p class="name">
<span class="type" v-text="item.type=='视频'? '音视频':'文件'"
:style="{color:item.type=='视频'? 'blue':'red',borderColor:item.type=='视频'? 'blue':'red'}">
</span>
{{item.title}}
</p>
<p class="author"><i class="el-icon-office-building"></i>{{item.author}}</p>
</div>
</div>
这是我的css代码
.allVideo{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 10px 50px;
}
.video{
/* width: 290px; */
width: 22%;
height: 300px;
margin-bottom:25px;
border: 1px solid rgb(238, 238, 238);
}