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

How to specify an element after which to wrap in css flexbox?

提问by theazureshadow

I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.

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

Here's the starting html:

这是起始的html：

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

And css:

和CSS：

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

I'd love something like the following:

我喜欢以下内容：

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

See the jsfiddle for a more complete setup: http://jsfiddle.net/theazureshadow/ww8DR/

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

回答by luksak

You can accomplish this by setting this on the container:

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

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

And on the child you set this:

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

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

This causes the child to make up 100% of the container width before any other calculation. Since to container is set to break in case there is not enough space it does so before and after this child.

这会导致子项在任何其他计算之前占容器宽度的 100%。由于 to 容器被设置为在没有足够空间的情况下中断，它会在这个孩子之前和之后这样做。

回答by jbenjohnson

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

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

Here's an article with your full list of options: https://tobiasahlin.com/blog/flexbox-break-to-new-row/

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

EDIT: This is really easy to do with Grid now: https://codepen.io/anon/pen/mGONxv?editors=1100

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

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

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

I don't think you can break after a specific item. The best you can probably do is change the flex-basis at your breakpoints. So:

我不认为你可以在特定项目后休息。您能做的最好的事情就是在断点处更改 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%;
}

Here's a sample: http://cdpn.io/ndCzD

这是一个示例：http: //cdpn.io/ndCzD

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

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

EDIT: You CAN break after a specific element! Heydon Pickering unleashed some css wizardry in an A List Apart article: http://alistapart.com/article/quantity-queries-for-css

编辑：您可以在特定元素后中断！Heydon Pickering 在 A List Apart 文章中释放了一些 css 魔法：http: //alistapart.com/article/quantity-queries-for-css

EDIT 2: Please have a look at this answer: Line break in multi-line flexbox

编辑 2：请看一下这个答案：多行 flexbox 中的换行符

@luksak also provides a great answer

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

回答by morewry

There is part of the spec that sure sounds like this... right in the "flex layout algorithm" and "main sizing" sections:

规范的一部分听起来确实像这样......就在“弹性布局算法”和“主要大小调整”部分：

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.

否则，从第一个未收集的项目开始，一个接一个地收集连续的项目，直到下一个收集的项目第一次不适合 flex 容器的内部主尺寸，或者直到遇到强制中断。如果第一个未收集的物品不适合，请将其收集到生产线中。在 CSS2.1 page-break-before/page-break-after [CSS21] 或 CSS3 break-before/break-after [CSS3-BREAK] 属性指定碎片中断的任何地方强制中断。

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

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

It sure sounds like (aside from the fact that page-breaks ought to be for printing), when laying out a potentially multi-line flex layout (which I take from another portion of the spec is one withoutflex-wrap: nowrap) a page-break-after: alwaysor break-after: alwaysshouldcause a break, or wrap to the next line.

当布局一个潜在的多行 flex 布局（我从规范的另一部分中得到的一个没有flex-wrap: nowrap）时，听起来确实（除了分页符应该用于打印这一事实）apage-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;
}

However, I have tried this and it hasn't been implemented that way in...

但是，我已经尝试过这个，但它并没有以这种方式实现......

• Safari (up to 7)
• Chrome (up to 43 dev)
• Opera (up to 28 dev & 12.16)
• IE (up to 11)

• Safari（最多 7 个）
• Chrome（最多 43 个开发者）
• Opera（高达 28 开发版和 12.16 版）
• IE（最多 11 个）

It does work the way it sounds (to me, at least) like in:

它确实像听起来一样工作（至少对我而言）如下：

• Firefox (28+)

• 火狐 (28+)

Sample at http://codepen.io/morewry/pen/JoVmVj.

示例位于http://codepen.io/morewry/pen/JoVmVj。

I didn't find any other requests in the bug tracker, so I reported it at https://code.google.com/p/chromium/issues/detail?id=473481.

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

But the topic took to the mailing list and, regardless of how it sounds, that's not what apparently they meant to imply, except I guess for pagination. So there's no way to wrap before or after a particular box in flex layout without nesting successive flex layouts inside flex children or fiddling with specific widths (e.g. flex-basis: 100%).

但是这个话题进入了邮件列表，无论听起来如何，这显然不是他们的意思，除了我猜是分页。因此，如果不将连续的 flex 布局嵌套在 flex 子项中或摆弄特定宽度（例如flex-basis: 100%），则无法在 flex 布局中的特定框之前或之后进行换行。

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 orderuseless. 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).

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

At least floats had clear. Something may get added at some point or another for this, one hopes.

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

回答by David Ortiz

Setting a min-width on child elements will also create a breakpoint. For example breaking every 3 elements,

在子元素上设置 min-width 也会创建一个断点。例如打破每 3 个元素，

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

If there are 4 elements, this will have the 4th element wrap taking the full 100%. If there are 5 elements, the 4th and 5th elements will wrap and take each 50%.

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

Make sure to have parent element with,

确保有父元素，

flex-wrap: wrap

回答by fiatjaf

The only thing that appears to work is to set flex-wrap: wrap;on the container and them somehow make the child you want to break out after to fill the full width, so width: 100%;should work.

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

If, however, you can't stretch the element to 100% (for example, if it's an <img>), you can apply a margin to it, like width: 50px; margin-right: calc(100% - 50px).

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