列固定
5 列为例:
.video-list {
margin: 0 50px;
display: flex;
flex-flow: row wrap;
}
.single-video {
width: 19%;
margin-top: 30px;
}
.single-video:not(:nth-child(5n)) {
margin-right: calc(5% / 4);
}
列不固定
使用 i 标签占位,几列就使用几个 i 标签。
.video-list {
margin: 0 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.single-video {
width: 260px;
margin-top: 30px;
margin-right: 10px;
}
.video-list > i {
width: 260px;
margin-right: 10px;
}
Google Chrome
Windows 10