在 Flexbox 中的特定点处换行元素

在 Flexbox 布局中，flex-wrap 属性允许元素在超出集装箱宽度。但是，目前没有标准方法来指定哪个元素应触发换行。

在某个元素之后强制换行的一种解决方法是在针对该元素的媒体查询中将该元素的 flex-basis 设置为 100%具体宽度。这会强制元素占据其父容器的整个宽度，从而有效地断开其后面的行：

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

例如，以下 CSS 将在每​​两个项目之后换行列表项目：

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

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

此方法提供了一种灵活的方法来控制包装行为，而不需要额外的标记。但是，需要注意的是，它依赖于媒体查询，这在某些情况下可能会带来性能开销和限制。