html - 具有可变宽度的 tile 的 Flexbox 顺序

Question

我有一个需要显示的图 block 网格。

文章 block 可以连续放置 4 个。

视频可以连续放置 2 个。

我遇到的问题是:一行文章，文章，文章，视频。视频跳到下一行。

或者文章，视频，视频。第二个视频再次跳到下一行。

设置顺序属性似乎很痛苦，因为文章/视频的显示顺序是完全随机的。有没有什么好的方法可以用 flexbox 来处理这个问题？

这是 fiddle - https://jsfiddle.net/nx4ap9u4/ (在这种情况下，我试图在第一行有 2 个蓝色 block 和绿色 block ，在第二行有 4 个蓝色 block ，而无需使用 CSS 或 JS 设置顺序)

.blog-feeder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.article-preview.grid {
  flex-grow: 1;
  flex-basis: 25%;
  width: auto;
  margin-right: 15px;
  background: blue;
  height: 300px;
}

.article-preview.grid.post_VIDEO {
  flex-basis: 50%;
  background: green;
}

<div class="blog-feeder">
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
</div>

Answer 1

这种布局算法超出了flexbox的能力。 flex 容器中的元素无法自动重新排序以填充一行。

但是，此功能在另一种 CSS3 技术 Grid Layout 中可用。

grid-auto-flow 属性的“密集”打包算法使网格元素能够自动重新排序以填充一行中的空白空间。

来自规范:

7.7. Automatic Placement: the grid-auto-flow property

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.

grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

.blog-feeder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  grid-gap: 10px;
  padding: 10px;
}

.article-preview.grid {
  grid-column-end: span 1;
  background: blue;
}

.article-preview.grid.post_VIDEO {
  grid-column-end: span 2;
  background: green;
}

<div class="blog-feeder">
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid"></div>
  <div class="article-preview grid post_VIDEO"></div>
  <div class="article-preview grid"></div>
</div>

revised demo

这是它的工作原理:

• .blog-feeder 元素成为带有 display: grid 的网格容器。

• grid-template-columns 属性将网格设置为四列，每列的宽度为 1fr，这是可用空间的平均分布。 (它类似于 flexbox 中的 flex-grow: 1。)

• 没有指定显式行。但是网格自动创建的任何行(又名，隐式行)的高度都是 100 像素。 (以前在原始代码中 flex 元素的高度为 300 像素。仅为演示目的而切换。)

• grid-auto-flow 属性设置布局算法。如有必要，dense 会从源顺序中取出元素以填补空白。

• grid-gap 属性设置项之间的空间(间距)。此属性仅在元素之间有效；它对元素和容器之间的空间没有影响。

到目前为止，所有命令都是在容器级别设置的。这与 flexbox 不同，flexbox 必须在 flex 元素上设置许多类似的命令。

• 在网格元素本身上，grid-column-end 属性中的 span 值告诉每个元素要覆盖多少列。

---

浏览器对 CSS 网格的支持

• Chrome - 自 2017 年 3 月 8 日起全面支持(第 57 版)
• Firefox - 自 2017 年 3 月 6 日起全面支持(第 52 版)
• Safari - 截至 2017 年 3 月 26 日的全面支持(版本 10.1)
• Edge - 截至 2017 年 10 月 16 日的全面支持(第 16 版)
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片:http://caniuse.com/#search=grid