先记住这个答案
多行标签使用 wrap-reverse 后，观察第二条线相对第一条线出现在交叉轴哪一侧，而不是盯着同一行的左右顺序。在常见横向 LTR 布局里它会让线从下往上堆叠；行内项目仍沿原来的主轴方向排列。它也不会修改 DOM 或键盘顺序。如果只排出一条线，往往没有足够的视觉线索判断换行方向。
wrap-reverse反转跨行堆叠- 每行主轴顺序不因此改变
- 一行时通常看不出差别
- DOM 阅读顺序保持不变
标签多行从哪边堆叠
聊天界面做一个多行标签容器，希望新增一行出现在上方，可能尝试 wrap-reverse。在常见横向书写、flex-direction: row 的容器里，多条线会从下往上堆叠，但每条线内仍按行内方向排列。若你想让每一行从右往左走，应考虑 row-reverse 或书写方向；若要反转真实阅读顺序，应该调整数据和 DOM。
.tags {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse; /* 反转多条线的交叉轴堆叠 */
gap: 8px;
}
.tags > span { flex: none; }每行项目的前后位置没反转，反转的是新一行出现的交叉轴侧。
反转的是交叉轴起止
Flex 有两条轴：主轴决定一条线上项目怎样摆，交叉轴决定线如何堆叠。flex-direction 控制主轴，flex-wrap 的 wrap-reverse 交换交叉轴起点与终点。布局有多条线时这个差别才明显；只有一条线时，视觉上往往看不出“换行方向”变化。align-content 沿交叉轴分配线间余量，也会受到反转后的交叉轴方向影响。
再做一个对照实验：固定容器宽度使六个标签分成两行，只改 wrap 为 wrap-reverse，记录每一行的第一个标签。两行内的第一个标签仍是同一个元素，变化的是两条线在容器交叉轴上的上下位置。如果同时改成 row-reverse，单行内部的行进方向也会改变；这两个属性组合后容易凭截图误判。用 DOM 顺序和键盘 Tab 顺序核对，才能确认视觉调整没有改变语义。
若交叉轴还有额外空间，align-content: flex-start 与 align-content: flex-end 所对应的物理上下侧，也会跟着反转后的交叉轴起止变化。要验证这一点，应给容器明确高度；容器高度紧贴两行内容时没有余量，对齐差异就看不出来。
容易答错的地方
- 把
wrap-reverse当成row-reverse - 前者反转跨行堆叠，后者反转一行上的主轴起止方向。
- 以为它改变 DOM 阅读顺序
- CSS 布局方向不重排文档节点，交互和阅读语义仍按 DOM 检查。
面试官还会怎么问？
只有一行时为什么看不出差别？
没有第二条线，便没有跨行堆叠方向可观察；项目自身的主轴顺序没有反转。
column 加 wrap-reverse 会怎样？
主轴纵向排列项目，换列发生在横向交叉轴，wrap-reverse 反转列的堆叠侧。
和 align-content 有什么关系？
align-content 分配多条线在交叉轴上的剩余空间；交叉轴反向后，起止侧的物理方向随之改变。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。