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

Question

我不认为这是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/

Answer 1

您可以通过在容器上设置此项来完成此操作:

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

在孩子你设置这个:

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

这导致孩子在任何其他计算之前构成容器宽度的100%.由于容器设置为在没有足够空间的情况下断开,因此它在此子项之前和之后都会这样做.

Answer 2

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

编辑:现在使用Grid非常容易:https://codepen.io/anon/pen/mGONxv？edit = 1100

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

我不认为你可以在特定项目后破坏.您可以做的最好的事情是在断点处更改弹性基础.所以:

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

编辑2:请看看这个答案:多线Flexbox中的换行符

@luksak也提供了很好的答案

Answer 3

在"flex布局算法"和"主要尺寸"部分中,有一部分规格确实听起来像这样......

否则,从第一个未收集的项目开始,逐个收集连续项目,直到第一次下一个收集的项目不适合Flex容器的内部主要大小,或者直到遇到强制中断为止.如果第一个未收集的项目不合适,请将其收集到该行中.在CSS2.1 page-break-before/page-break-after [CSS21]或CSS3 break-before/break-after [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个)
• Chrome(最多43个开发者)
• Opera(最多28开发和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布局或摆弄特定宽度(例如flex-basis: 100%).

当然,这非常令人讨厌,因为使用Firefox实现证实了我怀疑该功能非常有用.除了改进的垂直对齐之外,缺乏在许多场景中避免了柔性布局的大量实用性.必须添加具有嵌套flex布局的附加包装标签来控制行包装的点,这增加了HTML和CSS的复杂性,并且可悲的是,经常渲染order无用.类似地,强制项目的宽度可以100%降低flex布局的"响应"潜力,或者需要大量高度特定的查询或计数选择器(例如,可以实现您需要的其他答案中提到的一般结果的技术) .

至少浮标有clear.人们希望,在某些时候可能会添加一些东西.

Answer 4

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

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

如果有4个元素,这将使第4个元素换行占用100%.如果有5个元素,则第4个和第5个元素将换行并且每个元素占50%.

确保有父元素,

flex-wrap: wrap