我不认为这是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/
=========================
这里有一篇文章列出了完整的选择列表:https://tobiasahlin.com/blog/flexbox-break-to-new-row/
编辑:现在用Grid很容易做到:https://codepen.io/anon/pen/mGONxv?editors=1100
=========================
我不认为你会因为一件特定的物品而崩溃。最好的方法可能是在断点处更改弹性基准。所以:
ul {
flex-flow: row wrap;
display: flex;
}
li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
}
@media (min-width: 40em;){
li {
flex-basis: 30%;
}
下面是一个示例:http://cdpn.io/ndCzD
============================================
编辑:你可以打破一个特定的元素!Heydon Pickering在一篇A List Apart文章中释放了一些css魔法:http://alistapart.com/article/quantity-queries-for-css
编辑2:请看看这个答案:多行flexbox中的换行
@luksak也提供了一个很好的答案
规范中有一部分听起来是这样的……在“flex layout algorithm”和“main sizing”部分:
Otherwise, starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size, or until a forced break is encountered. If the very first uncollected item wouldn’t fit, collect just it into the line. A break is forced wherever the CSS2.1 page-break-before/page-break-after [CSS21] or the CSS3 break-before/break-after [CSS3-BREAK] properties specify a fragmentation break.
从http://www.w3.org/TR/css-flexbox-1/ main-sizing
这听起来确实像(除了换行应该是为了打印的事实)，当布局一个潜在的多行伸缩布局(我从规范的另一部分中获得的是一个没有flex-wrap: nowrap的布局)时，换行后的分页:always或换行后的分页: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布局中，如果不在flex子项中嵌套连续的flex布局，或者不修改特定的宽度(例如flex-basis: 100%)，就无法在特定的盒子之前或之后进行换行。
This is deeply annoying, of course, since working with the Firefox implementation confirms my suspicion that the functionality is incredibly useful. Aside from the improved vertical alignment, the lack obviates a good deal of the utility of flex layout in numerous scenarios. Having to add additional wrapping tags with nested flex layouts to control the point at which a row wraps increases the complexity of both the HTML and CSS and, sadly, frequently renders order useless. Similarly, forcing the width of an item to 100% reduces the "responsive" potential of the flex layout or requires a lot of highly specific queries or count selectors (e.g. the techniques that may accomplish the general result you need that are mentioned in the other answers).
至少漂浮物是清晰的。人们希望在某个时候会为此添加一些东西。
你可以在容器上设置这个:
ul {
display: flex;
flex-wrap: wrap;
}
在child上你设置这个:
li:nth-child(2n) {
flex-basis: 100%;
}
ul { 显示:flex; flex-wrap:包装; list-style:没有; ｝ 李:nth-child (4 n) { flex-basis: 100%; ｝ < ul > <李> 1李< / > <李> 2李< / > <李> 3 < /李> <李> 4李< / > < / 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;右边框:calc(100% - 50px)。
