如何指定一个元素之后包装在CSS flexbox？
我不认为这是Flexbox标准的一部分，但是在某个元素之后build议或强制包装可能有一个窍门吗？ 我想对不同的页面大小做出反应，并以不同的方式包装一个列表，而不是在下一行显示（例如）孤立的菜单项，而是在菜单的中间。
这里是开始的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/
你可以通过在容器上设置这个来实现这个function：
ul { display: flex; flex-wrap: wrap; }
在这个孩子身上，你设定了这个：
li:nth-child(2n) { flex-basis: 100%; }
这导致孩子在任何其他计算之前占据容器宽度的100％。 由于容器被设置为在没有足够空间的情况下中断，所以在这个孩子之前和之后都这样做。
我不认为你可以打破一个具体的项目。 你可以做的最好的事情就是改变你的断点的弹性基础。 所以：
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：请看看这个答案： 在多线柔性线条中断线
@luksak也提供了一个很好的答案
有一部分规范肯定听起来像这样……在“flex layout algorithm”和“main sizing”部分：
否则，从第一个未收集的项目开始，逐个收集连续的项目，直到第一次收集的下一个项目不适合Flex容器的内部主尺寸，或者直到遇到强制中断为止。 如果第一个未收集的物品不适合，就把它收集起来。 只要CSS2.1页面中的break-before / page-break-after [CSS21]或CSS3 break-before / break-after [CSS3-BREAK]属性指定了分段中断，就会强制中断。
从http://www.w3.org/TR/css-flexbox-1/#main-sizing
它肯定听起来像（除了页面打破应该用于打印的事实），当布置一个潜在的多行柔性布局（我从另一部分规范是一个没有 flex-wrap: nowrap ）a 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个开发者）
- 歌剧（高达28开发和12.16）
- IE（最多11个）
它的工作方式听起来（对我来说，至less）如下：
- Firefox（28+）
样品在http://codepen.io/morewry/pen/JoVmVj 。
我没有发现任何其他的错误跟踪器的请求，所以我在https://code.google.com/p/chromium/issues/detail?id=473481上报告。;
但是这个话题已经发到了邮件列表上，不pipe听起来怎么样，除了我想要的分页以外，这不是显然意味着什么。 因此，无法在flex布局中的特定框之前或之后进行换行，而无需在flex子代中嵌套连续的flex布局，也不能在特定的宽度（例如flex-basis: 100% ）下摆弄。
当然，这是非常烦人的，因为使用Firefox实现证实了我怀疑这个function是非常有用的。 除了改进的垂直alignment之外，这种缺陷在多种情况下都不会消除很多柔性布局的实用性。 不得不添加具有嵌套的柔性布局的附加包装标签来控制行换行的点增加了HTML和CSS的复杂性，可惜的是，经常呈现order无用。 类似地，强制项目的宽度为100%会降低flex布局的“响应”潜力，或者需要大量高度特定的查询或计数select器（例如，可以完成您需要的其他技术答案）。
至less花车clear 。 人们希望，有些东西可能会在某个点上被添加。
在子元素上设置最小宽度也会创build一个断点。 例如打破每3个元素，
flex-grow: 1; min-width: 33%;
如果有4个元素，这将有第四个元素包装完整的100％。 如果有5个元素，则第4个元素和第5个元素将会包装并占50％。
确保有父元素，
flex-wrap: wrap
