【原创】flex 多行多列

列固定

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;
}
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注