Flex容器保持flex-direction:row和nowrap时，如何让最后一项换行？

在保持容器flex-direction: row和flex-wrap: nowrap的前提下，让最后一个项目换行，有几个实用的方法：

方法1：将最后一个项目设为块级元素 #

这是最直接的方案，把最后一个项目从Flex布局流中脱离，变成块级元素后会自动换行：

/* 假设容器类名为flex-container */
.flex-container > :last-child {
  display: block;
}

其他项目仍会遵循Flex的行排列规则，最后一个项目作为块级元素独占一行。

方法2：绝对定位（需容器为相对定位） #

如果容器本身已设置position: relative，可以通过绝对定位把最后一个项目移到下一行：

.flex-container > :last-child {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

注意：如果容器没有position: relative，这个方法会导致项目相对于整个文档定位，不建议在这种场景使用。

方法3：利用Flex基准宽度+外边距（视觉换行） #

通过给最后一个项目设置占满容器宽度的基准值，再用外边距把它推到下一行（适合容器允许横向溢出的场景）：

.flex-container > :last-child {
  flex-basis: 100%;
  margin-top: 1rem; /* 根据实际需求调整间距 */
}

这个方法会让最后一个项目溢出容器右侧，通过margin-top在视觉上移到第二行，需要确保容器的父元素不会因为溢出出现滚动条（可给父元素加overflow-x: hidden）。

内容的提问来源于stack exchange，提问作者yoke_snowwolf