如何控制 CSS Flexbox 中的元素换行：我可以强制 Flexbox 在特定元素之后换行吗？

如何控制 CSS Flexbox 中的元素换行

问题：

有办法吗指定一个元素，在 Flexbox 布局中应在该元素之后进行换行？这对于控制列表的响应能力而不添加额外的标记非常有用。

答案：

虽然没有显式的“flex-break”属性根据flexbox标准，可以通过结合以下技巧来实现这种效果：

1. 设置“flex-wrap:wrap;”在容器上： 这允许项目根据需要换行。
2. 使用“flex-basis: 100%;”在要在其后中断的子元素上： 这告诉浏览器将这些元素的最小宽度设置为 100%，有效地强制它们换行。

示例：

<code class="css">ul {
  display: flex;
  flex-wrap: wrap;
}

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

在此示例中，列表中的项目将在每个其他元素之后换行到新行（取决于可用空间）。通过调整“nth-child()”的值，您可以控制哪些元素导致换行。

更完整的演示，请参阅提供的 JSFiddle：http://jsfiddle.net/theazureshadow/ww8DR /

以上是如何控制 CSS Flexbox 中的元素换行：我可以强制 Flexbox 在特定元素之后换行吗？的详细内容。更多信息请关注PHP中文网其他相关文章！