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

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

这是起始 html：

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

And 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/

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

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