我不认为这是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/
解决方法
我不认为你可以打破一个特定的项目后。你可能做的最好的是在你的断点改变灵活基础。所以:
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发表了一篇文章:http://alistapart.com/article/quantity-queries-for-css
编辑2:请看看这个答案:Line break in multi-line flexbox
@luksak也提供了一个很好的答案