Question

我认为这还不是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/

Answer 1

您可以通过在容器上设置它来完成此操作：

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

在孩子身上你设置了这个：

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

这导致孩子在任何其他计算之前弥补容器宽度的100％。因为容器被设置为在没有足够空间的情况下断开，所以在这个孩子之前和之后都这样做。

Answer 2

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

以下是一篇包含完整选项列表的文章：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：请看一下这个答案：Line break in multi-line flexbox

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

Answer 3

有一部分规格确实听起来像这样......在＆＃34; flex布局算法＆＃34;和＃34;主要尺寸＆＃34;部分：

否则，从第一个未收集的项目开始，收集连续项目一个接一个，直到下一个第一次收集的项目不适合Flex容器的内部主要部分大小，或直到遇到强制中断。如果是第一个未收集的项目不合适，只收集它。休息在CSS2.1 page-break-before / page-break-after的任何地方都被强制使用 [CSS21]或CSS3 break-before / break-after [CSS3-BREAK]属性指定碎片中断。

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

这肯定听起来（除了应该打印分页的事实），当布局一个潜在的多行灵活布局时（我从规范的另一部分获取的是一个没有< / em> 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个开发者）

Opera（最多28 dev＆amp; 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-basis: 100%），则无法在flex布局中的特定框之前或之后进行换行。

这当然非常烦人，因为使用Firefox实现证实了我怀疑该功能非常有用。除了改进的垂直对齐之外，缺乏在许多场景中避免了柔性布局的大量实用性。必须使用嵌套的flex布局添加额外的包装标签来控制行包装的点，这会增加HTML和CSS的复杂性，遗憾的是，经常呈现order无用。同样，将项目的宽度强制为100%会降低＆＃34;响应＆＃34; flex布局的潜力或需要大量高度特定的查询或计数选择器（例如，可以实现您需要的其他答案中提到的一般结果的技术）。

至少花车有clear。人们希望，可能会在某些时候添加某些东西。

Answer 4

在子元素上设置最小宽度也会创建断点。例如，破坏每3个元素，

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

如果有4个元素，这将使第4个元素换行占用100％。如果有5个元素，则第4个和第5个元素将换行并且每个元素占50％。

确保父元素为

flex-wrap: wrap

Answer 5

唯一可行的方法是在容器上设置flex-wrap: wrap;，然后它们以某种方式让你想要分解的孩子填满整个宽度，所以width: 100%;应该有效。

但是，如果您无法将元素拉伸到100％（例如，如果它是<img>），则可以对其应用边距，例如{{1} }。

如何指定一个元素，然后在css flexbox中包装？

5 个答案: