如何控制 CSS Flexbox 中的元素环绕？

CSS Flexbox 中的灵活元素换行控制

指定 CSS Flexbox 元素应在其后换行的元素的需求并未在弹性盒标准。然而，可以采用一种巧妙的技术来实现这种效果。

要在特定元素之后强制换行，请按照下列步骤操作：

1. 设置 display: flex;和 flex-wrap：包裹；在容器元素上。
2. 在要换行的元素上，设置 flex-basis: 100%;。

此解决方案有效地设置了元素的最小宽度，导致必要时它会切换到自己的行。

例如，考虑以下标记：

<code class="html"><ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul></code>

和以下 CSS：

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

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

这将导致要在第四个元素之后换行的项目，创建两行：

1 2
3 4

以上是如何控制 CSS Flexbox 中的元素环绕？的详细内容。更多信息请关注PHP中文网其他相关文章！