如何指定一个元素之后在css flexbox中换行？ [英] How to specify an element after which to wrap in css flexbox?

问题描述

我不认为这是flexbox标准的一部分，但是有可能有一个窍门建议或强制包装后某个元素？我想响应不同的页面大小，换一个列表，没有额外的标记，所以，而不是（例如）孤立的菜单项在下一行，我打破菜单中间。

I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.

这里是开始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;
}

我喜欢类似以下的东西：

I'd love something like the following:

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

查看jsfiddle更完整的设置：http://jsfiddle.net/theazureshadow/ww8DR/

推荐答案

我不认为你可以在一个特定的项目后打破。你可能做的最好的是在你的断点改变灵活基础。所以：

I don't think you can break after a specific item. The best you can probably do is change the flex-basis at your breakpoints. So:

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

You CAN break after a specific element! Heydon Pickering unleashed some css wizardry in an A List Apart article: http://alistapart.com/article/quantity-queries-for-css

编辑2：请看看这个答案：多行flexbox中的换行符

EDIT 2: Please have a look at this answer: Line break in multi-line flexbox

@luksak还提供了大答案

@luksak also provides a great answer

这篇关于如何指定一个元素之后在css flexbox中换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！