如何指定一个元素之后在css flexbox中换行?

前端之家收集整理的这篇文章主要介绍了如何指定一个元素之后在css flexbox中换行?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不认为这是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;
}

看到j​​sfiddle更完整的设置: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也提供了一个很好的答案

猜你在找的CSS相关文章