如何实现从容器底部向上的flex-wrap换行效果？

不用JavaScript也能实现，给你两个实用的纯CSS方案：

方案1：旋转翻转实现反向排列 #

核心思路是把容器整体旋转180度，让flex的起始排列点变成容器右下角，再把每个子元素旋转回来保证内容正常显示：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 此时起始位置对应原容器的右下角 */
  transform: rotate(180deg);
  /* 可根据需求添加容器宽高、内边距等样式 */
}

.container > div {
  transform: rotate(180deg);
  /* 子元素基础样式：比如固定宽度、高度、margin等 */
  width: 100px;
  height: 100px;
  margin: 5px;
}

注意：如果容器设置了内边距，旋转后内边距方向会反转，可通过调整padding值或额外嵌套一层容器解决。

方案2：CSS Grid 从下往上填充 #

固定行高场景下，用Grid的反向行排列逻辑也能实现：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px); /* 自动填充列，子元素宽度100px */
  grid-auto-rows: 100px; /* 固定行高 */
  align-content: end; /* 所有行靠容器底部对齐 */
  grid-auto-flow: row dense; /* 强制填满行空间 */
}

这个方案无需旋转，布局逻辑更直观，但仅适合行高固定的场景。

原代码无效的原因 #

你用的align-content: flex-end只是把所有行整体靠容器底部对齐，但flex的核心排列逻辑还是从上到下、从左到右，所以不完整的行依然会留在最后一行（底部）。要实现反向填充，必须改变排列的起始方向或整体布局逻辑。

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