具有可变宽度的磁贴的 Flexbox 顺序答案

【问题标题】：Flexbox order of tiles with variable widths具有可变宽度的磁贴的 Flexbox 顺序
【发布时间】：2017-11-02 00:04:36
【问题描述】：

我有一个网格需要显示。

文章图块可以连续放置 4 个。

视频可以连续播放 2 个视频。

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

或文章、视频、视频。第二个视频再次被撞到下一行。

设置 order 属性似乎很痛苦，因为文章/视频的显示顺序是完全随机的。 flexbox有什么好办法解决这个问题吗？

这是小提琴 - https://jsfiddle.net/nx4ap9u4/（在这种情况下，我试图在第一行设置 2 个蓝色块和绿色块，在第二行设置 4 个蓝色块，而无需使用 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>

【问题讨论】：

我将尝试清理我的代码以进行发布。我应该澄清一下，我可以稍微重新排序文章/视频，以便它们很好地适合网格。如果可能的话，我希望 CSS 来处理重新排序，而不是使用 jQuery。

标签： html css flexbox css-grid

【解决方案1】：

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

但是，此功能在另一种 CSS3 技术中可用，网格布局。

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

来自规范：

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

未明确放置的网格项目会自动放置到网格容器中自动放置的未占用空间算法。

grid-auto-flow 控制自动放置算法的工作方式，准确指定自动放置的项目如何流入网格。

dense

如果指定，自动放置算法使用“密集”包装算法，它会尝试在网格中较早地填充孔较小的项目稍后出现。这可能会导致项目出现乱序，这样做会填补较大项目留下的漏洞。

.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。）
没有指定显式行。但是任何由网格自动创建的行（又名，implicit 行）都将具有 100 像素的高度。（以前在原始代码中弹性项目的高度为 300 像素。切换仅用于演示目的。）
grid-auto-flow 属性设置布局算法。 dense 将在必要时从源订单中取出项目以填补空白。
grid-gap 属性设置项目之间的空间（排水沟）。此属性仅适用于项目之间；它对项目和容器之间的空间没有影响。

到目前为止，所有命令都是在容器级别设置的。这与 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

【讨论】：