193

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

4

5 回答 5

168

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

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

在你设置的孩子身上：

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 元素来强制在它之前和之后的元素之间换行。

于 2015-05-05T13:52:29.813 回答
76

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

这是一篇包含完整选项列表的文章：https ://tobiasahlin.com/blog/flexbox-break-to-new-row/

编辑：现在用 Grid 很容易做到这一点：https ://codepen.io/anon/pen/mGONxv?editors=1100

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

我不认为你可以在特定项目后打破。您可能做的最好的事情就是在断点处更改 flex-basis。所以：

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 也提供了一个很好的答案

于 2013-10-24T21:02:33.370 回答
34

有一部分规范听起来确实像这样......就在“flex layout algorithm”和“main sizing”部分：

否则，从第一个未收集的项目开始，一个接一个地收集连续的项目，直到下一个收集的项目第一次不适合弹性容器的内部主尺寸，或者直到遇到强制中断。如果第一个未收集的物品不适合，则将其收集到行中。只要 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

这听起来确实像（除了分页符应该用于打印的事实），当布置一个潜在的多行 flex 布局（我从规范的另一部分中获取的是没有 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 个开发者和 12.16 个）
  • IE（最多 11 个）

它的工作方式听起来（至少对我来说）就像：

  • 火狐（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 布局在许多场景中的大量实用性。必须使用嵌套的 flex 布局添加额外的包装标签来控制行换行的点增加了 HTML 和 CSS 的复杂性，并且遗憾的是，经常呈现order无用。同样，强制项目的宽度以100%减少 flex 布局的“响应”潜力，或者需要大量高度特定的查询或计数选择器（例如，可以实现您需要的一般结果的技术，这些技术在其他答案中提到） .

至少花车有clear。有人希望，为此可能会在某个时候或另一个时候添加一些东西。

于 2015-04-02T23:41:45.597 回答
13

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

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

如果有 4 个元素，则第 4 个元素将占满 100%。如果有 5 个元素，则第 4 个和第 5 个元素将换行并各占 50%。

确保有父元素，

flex-wrap: wrap
于 2017-01-24T20:10:30.187 回答
2

似乎唯一可行的方法是设置flex-wrap: wrap;在容器上，它们以某种方式使您想要突破的孩子填满整个宽度，所以width: 100%;应该可以。

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

于 2018-04-06T14:43:07.087 回答