可变宽度瓷砖的Flexbox顺序

文章瓷砖可以适合4连续。

视频可以连续放入2个。

我遇到的问题是：与文章，文章，文章，视频一行。视频碰到下一行。

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

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

来源

2017-06-01 Tom

我会尝试清理我的代码为张贴。我应该澄清，对于重新排列文章/视频，我很好，所以它们很好地适合网格。如果可能的话，我只想让CSS处理重新排序而不是用jQuery来完成。 – Tom

这种类型的布局算法是超出了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的高度。（原始代码中以前300px高的Flex项目，仅用于演示目的）
grid-auto-flow属性设置布局算法。如有必要，dense将从源订单中取出项目以填补空白。
grid-gap属性设置项目（排水沟）之间的空间。此属性仅适用于项目之间;它对物品和容器之间的空间没有影响。

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

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

浏览器支持CSS电网

铬 - 全力支持2017年3月8日（版本57）
Firefox浏览器 - 全面支持，2017年3月6日（中版本52）
Safari - 截至2017年3月26日的全面支持（版本10.1）
Edge - 截至2016年10月16日的全面支持， 2017（版本16）
IE11 - 不支持当前规范;支持过时版本

下面是完整的画面：http://caniuse.com/#search=grid

来源

2017-06-01 03:55:37

可变宽度瓷砖的Flexbox顺序

回答

相关问题