如何指定一个元素，然后将其包装在 css flexbox 中？ [复制]

Posted 2023-03-05

技术标签:

【中文标题】如何指定一个元素，然后将其包装在 css flexbox 中？ [复制]【英文标题】：How to specify an element after which to wrap in css flexbox? [duplicate] 【发布时间】：2013-11-03 16:29:08 【问题描述】：

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

【问题讨论】：

对于基于视口尺寸的包装有媒体查询，对于基于内容数量的包装，例如兄弟数量，有quantity queries。 【参考方案1】：

你可以通过在容器上设置这个来实现：

ul 
    display: flex;
    flex-wrap: wrap;

在你设置的孩子身上：

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

ul 
  display: flex;
  flex-wrap: wrap;
  list-style: none;


li:nth-child(4n) 
  flex-basis: 100%;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

这会导致子元素在任何其他计算之前占容器宽度的 100%。由于容器被设置为在没有足够空间的情况下打破它在这个孩子之前和之后这样做。所以你可以使用一个空的 div 元素来强制在它之前和之后的元素之间换行。

【讨论】：

谢谢！例如，如果您想每行有 4 个项目，您只需：li flex-basis: 25% 设置每行 100% 或 100% / 个元素的基础并不是一个很好的解决方案，因为它需要您在容器上设置一个高度，否则它会扩展。 @Lucent, min-height 就足够了，对吧？想想min-height: 1px 可能会减轻很多用例的这种担忧。也使用此解决方案拉伸元素，否则不会占用 100%【参考方案2】：

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

这是一篇包含完整选项列表的文章：https://tobiasahlin.com/blog/flexbox-break-to-new-row/

编辑：现在使用 Grid 真的很容易做到这一点：https://codepen.io/anon/pen/mGONxv?editors=1100

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

我不认为你可以在特定项目后打破。您可能做的最好的事情就是在断点处更改 flex-basis。所以：

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：请看一下这个答案：Line break in multi-line flexbox

@luksak 也提供了很好的答案

【讨论】：

这主意不错！我已将其添加到 jsfiddle。玩弄它，我认为我更喜欢非基于百分比的方法，因为基于百分比的容器会在您进一步缩小容器时防止进一步回流，尽管您当然可以在容器缩小时添加更具体的断点（当它应该达到 33% 时）等）。在 chrome 桌面上效果很好。很遗憾，它不在 android 在 Safari 7.0.3 中也不起作用。是的 - 您只需要为 css 提供适当的前缀我看不到 alistapart 文章如何解释如何在特定项目上中断。我可以看到它如何谈论选择项目，但没有打破包装。【参考方案3】：

规范的某些部分听起来确实像这样......就在“flex layout algorithm”和“main sizing”部分：

否则，从第一个未收集的项目开始，收集一个接一个的连续项目，直到第一次出现下一个收集的项目不适合 flex 容器的内部 main 大小，或直到遇到强制中断。如果第一个未收集的项目不适合，仅将其收集到行中。休息在 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 个）

它确实像它听起来的方式（至少对我来说）那样工作：

火狐（28 岁以上）

http://codepen.io/morewry/pen/JoVmVj 的示例。

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

但是这个话题进入了邮件列表，不管它听起来如何，这显然不是他们想要暗示的，除了我猜是分页。因此，如果不将连续的 flex 布局嵌套在 flex 子项中或摆弄特定的宽度（例如flex-basis: 100%），就无法在 flex 布局中的特定框之前或之后进行换行。

当然，这很烦人，因为使用 Firefox 实现证实了我的怀疑，即该功能非常有用。除了改进的垂直对齐方式之外，这种缺乏也消除了 flex 布局在许多场景中的大量实用性。必须使用嵌套的 flex 布局添加额外的包装标签来控制行换行的点增加了 HTML 和 CSS 的复杂性，而且遗憾的是，经常渲染 order 无用。类似地，将项目的宽度强制为100% 会降低 flex 布局的“响应”潜力，或者需要大量高度特定的查询或计数选择器（例如，可以实现您需要的一般结果的技术，在其他答案）。

至少浮动有clear。有人希望，可能会在某个时候为此添加一些东西。

【讨论】：

这听起来很老套。据我了解，page-break-after 用于打印时，break-after 用于“页面、列或区域中断行为”，而不是换行符。与规范作者一起讨论；正如我所提到的，它直接来自 Flexbox 的官方规范。这不是我提出的关于“酷把戏”的建议。顺便说一句，包装一个 flex 行严格来说不是“内联换行符”，我也没有说它是。短语“换到下一行”只是表达“它不会再与其他框相邻”的几种随意表达方式之一。该死！这看起来很有希望:( 如果我们有 break-after: row 这将是完美的。然而，我们目前拥有的最小的东西是 break-after: region，大约 0% 的浏览器支持它，而 break-after: column 已经太重了。想想你有 flex 和多个列的情况。断列与断行不同。【参考方案4】：

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