Question

我需要显示一块瓷砖网格。

物品瓷砖可以连续4个。

视频可以连续放入。

我遇到的问题是这样：一行文章，文章，文章，视频。视频被撞到了下一行。

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

设置订单属性似乎很痛苦，因为文章/视频的显示顺序是完全随机的。使用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>

Answer 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。）
未指定显式行。但是网格自动创建的任何行（也就是隐式行）的高度都是100px。（原始代码中的Flex项目的前身高度为300px。仅用于演示目的。）
grid-auto-flow属性设置布局算法。如有必要，dense会将商品从源订单中删除以填补空白。
grid-gap属性设置项目（排水沟）之间的空间。此属性仅适用于项目之间;它对物品和容器之间的空间没有影响。

到目前为止，所有命令都设置在容器级别。这与flexbox不同，后者必须在弹性项目上设置许多类似的命令。

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

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

具有可变宽度的瓷砖的Flexbox顺序

1 个答案: