我不认为这是flexbox标准的一部分,但是在某个元素之后可能有一个建议或强制包装的技巧吗?我想响应不同的页面大小并以不同的方式包装列表而不需要额外的标记,这样我就不会在下一行中有(例如)孤立的菜单项,而是在菜单中间打破.
这是开始的html:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
和css:
ul {
display: flex;
flex-wrap: wrap;
}
Run Code Online (Sandbox Code Playgroud)
我喜欢以下内容:
/* inside media query targeting width */
li:nth-child(2n) {
flex-break: after;
}
Run Code Online (Sandbox Code Playgroud)
有关更完整的设置,请参阅jsfiddle:http://jsfiddle.net/theazureshadow/ww8DR/