如何指定一个元素后包装在css flexbox?

我不认为这是flexbox标准的一部分，但是是否有一种技巧可以建议或强制在某个元素之后进行包装?我希望对不同的页面大小做出响应，并以不同的方式包装列表，而不需要额外的标记，这样就不会在下一行有(例如)孤立的菜单项，而是在菜单中间中断。

下面是开始的html:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

和css:

ul {
display: flex;
flex-wrap: wrap;
}

我喜欢这样的东西:

/* inside media query targeting width */
li:nth-child(2n) {
flex-break: after;
}

有关更完整的设置，请参阅jsfiddle: http://jsfiddle.net/theazureshadow/ww8DR/

219189 次浏览
小开

=========================

https://tobiasahlin.com/blog/flexbox-break-to-new-row/

编辑:这是很容易做到与网格现在:http://cdpn.io/ndCzD

============================================

编辑:你可以打破一个特定的元素!Heydon Pickering在一篇A List Apart文章中释放了一些css魔法:< A href="http://alistapart.com/article/quantity-queries-for-css" rel="noreferrer">http://alistapart.com/article/quantity-queries-for-css

编辑2:请看看这个答案:多行flexbox中的换行

@luksak也提供了一个很好的答案

小开

规范中有一部分听起来是这样的……在“flex layout algorithm”和“main sizing”部分:

否则，从第一个未收集的项开始收集 连续项目一项一项，直到第一次，下一次 收集的物品无法放入伸缩容器的内部主管道中 大小，或直到遇到强制中断。如果一开始 未收集的物品不适合，只收集到队列中。休息一下 在任何CSS2.1页断前/页断后 [CSS21]或CSS3 break-before/break-after [CSS3- break]属性

.使用实例

从http://www.w3.org/TR/css-flexbox-1/#main-sizing

它确实听起来像(除了分页符应该是用于打印的事实)，当布局一个潜在的多行伸缩布局(我从规范的另一部分是没有 flex-wrap: nowrap)，一个page-break-after: always或break-after: always 应该会导致断点，或换行到下一行。

.flex-container {
display: flex;
flex-flow: row wrap;
}


.child {
flex-grow: 1;
}


.child.break-here {
page-break-after: always;
break-after: always;
}

然而，我已经尝试过了，它还没有以这种方式实现……

  • Safari(最多7个)
  • Chrome(最多43 dev)
  • Opera(多达28个开发人员;12.16)
  • IE(最多11名)

它确实像它听起来那样(至少对我来说):

  • Firefox (28 +)

在http://codepen.io/morewry/pen/JoVmVj取样。

我在错误跟踪器中没有找到任何其他请求，所以我在https://code.google.com/p/chromium/issues/detail?id=473481报告它。

但是这个话题被放到了邮件列表中，不管听起来如何，这显然不是他们想要暗示的，除了我猜的页码。因此，在伸缩布局中，如果不在伸缩子元素中嵌套连续的伸缩布局或修改特定的宽度(例如flex-basis: 100%)，就无法在特定的盒子之前或之后进行包装。

当然，这非常令人讨厌，因为使用Firefox实现证实了我的怀疑，即该功能非常有用。除了改进的垂直对齐之外，flex布局在许多场景中都无法发挥其效用。必须使用嵌套的flex布局添加额外的换行标记来控制行换行的位置，这增加了HTML和CSS的复杂性，而且遗憾的是，经常会使order无用。类似地，将项的宽度强制设置为100%会降低flex布局的“响应性”潜力，或者需要大量高度特定的查询或计数选择器(例如，在其他答案中提到的可能实现您需要的一般结果的技术)。

至少浮点数有clear。人们希望在某个时候会为此添加一些东西。

小开

你可以在容器上设置这个:

ul {
display: flex;
flex-wrap: wrap;
}

在child上你设置这个:

li:nth-child(2n) {
flex-basis: 100%;
}


ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}


li:nth-child(4n) {
flex-basis: 100%;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

这将导致子容器在任何其他计算之前占到容器宽度的100%。因为容器被设置为在没有足够空间的情况下中断，所以它会在这个子容器之前和之后中断。因此，您可以使用空div元素强制在其前后元素之间换行。

小开

在子元素上设置最小宽度也会创建断点。比如每3个元素分解一次，

flex-grow: 1;
min-width: 33%;

如果有4个元素，这将使第4个元素的换行占全部100%。如果有5个元素，第4个和第5个元素将分别缠绕并占据50%。

确保父元素为，

flex-wrap: wrap
小开

唯一能起作用的是在容器上设置flex-wrap: wrap;，并且它们以某种方式使你想要爆发的子元素填充全宽度，因此width: 100%;应该起作用。

但是，如果不能将元素拉伸到100%(例如，如果它是<img>)，则可以对其应用边距，如width: 50px; margin-right: calc(100% - 50px)。


提交答案