row-reverse仅改变视觉排列顺序，不改变DOM结构、焦点顺序或触发3D变换；需水平翻转用scaleX(-1)，3D翻转用rotateY(180deg)，布局调序优先用order。
flex-direction: row-reverse 能让子元素视觉上从右到左排列，但它不是“水平翻转”，只是倒序渲染——DOM顺序、键盘焦点、屏幕阅读器读取顺序全都不变，别指望它实现镜像翻转或卡片翻转动画。
为什么 row-reverse 不等于水平翻转
它只改变弹性项在主轴上的绘制顺序，不触发任何 3D 变换：
• transform、backface-visibility、perspective 对它完全无效
• JS 调用 getBoundingClientRect() 或 offsetLeft 拿到的仍是原始 DOM 顺序下的坐标
• 表单控件 tabindex 和屏幕阅读器仍按 HTML 源码顺序走，用户 tab 时会先聚焦最左边的元素（哪怕它在视觉上最靠右）
• transition: flex-direction 在所有浏览器中都不生效——这个属性根本不可动画
真正需要水平翻转时该用什么
取决于你要翻转的对象粒度：
• 单个元素（比如图标、文字块）：用 transform: scaleX(-1)，配合 transform-origin 控制翻转中心点
• 卡片级 3D 翻转（正面/背面切换）：必须用 transform: rotateY(180deg) + transform-style: preserve-3d + perspective 设在父容器上
• 多列布局在移动端调换左右顺序（如 PC 的 main + aside → 移动端 aside + main）：优先用 order 配合 flex-direction: column，而不是 row-reverse
row-reverse 的真实适用场景和坑
它只适合纯视觉微调，且你明确接受语义断裂：
• 用在 RTL（从右向左）语言环境下的按钮组、分页器等 UI 组件，辅助对齐逻辑
• 配合 text-align: right 让内联文本块整体右对齐，但要注意 direction 属性可能被干扰
• 容易踩的坑：
– 父容器若同时设了 flex-wrap: wrap，某些旧版安卓 WebView 会忽略 row-reverse 导致换行错乱
– Safari 对 row-reverse 下的 justify-content: flex-start 渲染有偏差，建议统一用 justify-content: flex-end 避免意外留白
– 不要把它和 scaleX(-1) 混用，叠加后坐标计算更难调试
真正卡住人的从来不是写错一行 CSS，而是没想清楚「我要翻转的是视觉顺序？DOM 语义？还是空间姿态？」——row-reverse 只答了第一个问题，其余两个它不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
