如何指定一个元素，然后在css flexbox中包装？

我不认为这是Flexbox标准的一部分，但是在某个元素之后建议或强制包装可能有一个窍门吗？我想回应不同的页面大小，并且不加标记地以不同的方式包装一个列表，所以我不会在下一行显示（例如）孤立的菜单项，而是在菜单中间中断。如何指定一个元素，然后在css 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/

来源

2013-10-24 theazureshadow

对于基于视窗的尺寸包裹有*媒体查询*，基于内容的数量，如兄弟姐妹数，有[***量包装查询***]（http://stackoverflow.com/a/33333193/3597276）。 –

重复的https://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox，它有一个很好的答案。 –

[多线柔性线条中的换行符]可能的重复（http://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox） – user

我不认为你可以打破特定项目后。你可以做的最好的事情是改变你的断点的弹性基础。所以：

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

================================ ============

~~编辑：你可以打破特定元素！海顿皮克林释放一些CSS巫术在列表除了文章： http://alistapart.com/article/quantity-queries-for-css~~

编辑2：请看看这个答案：Line break in multi-line flexbox

@luksak还提供了一个很好的答案

来源

2013-10-24 21:02:33 jbenjohnson

这是一个相当不错的主意！我已将它添加到jsfiddle。玩弄它，我认为我更喜欢非基于百分比的方法，因为基于百分比的方法可以防止进一步回流，因为缩小容器更多，尽管您可以在缩小时添加更多特定的断点（当它应该降至33％等）。 – theazureshadow

在Chrome桌面上效果很好。所以很伤心它不会在android的webviews for android <4.4 :( –

也不能在Safari 7.0.3中运行。 – wprater

有一部分这听起来确实像这样...就在“灵活布局算法”和“主要尺寸”部分的规范：

否则，从第一个未收项目开始，收集 consecuti直到第一次收集到的项目将不适合柔性容器的内部主体大小，或者直到遇到强制中断为止。如果第一个未收集的物品不合适，请将其收集到一行中。在CSS2.1页面中断前/页面中断后 [CSS21]或CSS3中断前/后中断[CSS3-BREAK]属性指定分段中断时，强制中断。

从http://www.w3.org/TR/css-flexbox-1/#main-sizing

它肯定听起来像（除了一个事实，即页游应该是用于打印），奠定了一个潜在的多弯曲线布局（这是我从另一部分需要时该规格是一个没有flex-wrap: nowrap）a page-break-after: always或break-after: always应该导致中断或换行到下一行。

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.child { 
    flex-grow: 1; 
} 

.child.break-here { 
    page-break-after: always; 
    break-after: always; 
}

但是，我已经尝试过这一点，它并没有在那种方式实施......

Safari浏览器（最多7）
铬（可达43 DEV）
歌剧（多达28 dev的& 12.16）
IE（最多11个）

它它的工作方式听起来（至少对我而言）如下：

Firefox（28+）

样品在http://codepen.io/morewry/pen/JoVmVj。

我在错误跟踪器中没有发现任何其他请求，所以我在https://code.google.com/p/chromium/issues/detail?id=473481报告了它。

但是，这个话题转到了邮件列表中，不管它听起来如何，这不是显然他们的意思，除了我猜测分页。因此，无法在Flex布局中的特定框之前或之后进行换行，而无需在Flex儿童内嵌套连续的柔性布局或以特定宽度摆弄（例如flex-basis: 100%）。

当然，这很令人讨厌，因为使用Firefox实现证实了我怀疑该功能非常有用。除了改进的垂直对齐之外，这种缺陷避免了在许多场景中大量使用柔性布局。不得不添加具有嵌套柔性布局的附加包装标签来控制行换行的点增加了HTML和CSS的复杂性，并且遗憾的是，经常会使order无用。同样，强制项目的宽度为100%可以降低flex布局的“响应”潜力，或者需要大量高度特定的查询或计数选择器（例如，可以完成您需要的其他答案中提到的一般结果的技术）。

至少花车有clear。人们希望，有些东西可能会在某个点或另一个点被添加。

来源

2015-04-02 23:41:45 morewry

这听起来很不可靠，据我了解，“page-break-after”用于当你打印和“break-after”用于“页面，列或区域中断行为”，而不是换行符。 – Ajedi32

接受spec规范作者;正如我所提到的，它是str来自Flexbox的官方规范。这不是我正在提出的一个“酷招”的建议。顺便说一句，包装柔性排不是严格意义上的“内联分界线”，我也没有这么说。 “换到下一行”这句话只是几种表达“它不再与其他盒子相邻”的休闲方式之一。 – morewry

该死！这看起来很有希望：（ – Lyrical

您可以在容器上设置此实现这一点：

ul { 
    display: flex; 
    flex-wrap: wrap; 
}

而且对孩子设置此：

li:nth-child(2n) { 
    flex-basis: 100%; 
}

这会导致孩子来弥补容器宽度的100％在任何其他计算之前。由于在容器没有足够的空间的情况下容器被设置为中断，所以在这个孩子之前和之后都这样做。

来源

2015-05-05 13:52:29 luksak

）谢谢！例如，如果你想每行有4个项目，你只需要：'li {flex-basis：25％}' –

设置100％或100％/元素的基础每行不是一个很好的解决方案，因为它需要你在容器上设置一个高度，否则它会扩展。 – Lucent

在子元素上设置最小宽度也会创建一个断点。例如打破每3个元素，

flex-grow: 1; 
min-width: 33%;

如果有4个元素，这将有第4个元素包装采取全100％。如果有5个元素，则第4个元素和第5个元素将包装并取每个50％。

确保有父元素，

flex-wrap: wrap

来源

2017-01-24 20:10:30

如何指定一个元素，然后在css flexbox中包装？

回答

相关问题