flex-direction: row-reverse 仅视觉反转主轴排列顺序，不改变文本方向、dom顺序或语义；真正rtl布局需配合 direction: rtl 触发unicode双向算法和字体特性。
flex-direction 与 direction 配合才能真正翻转布局
只改 flex-direction: row-reverse 不等于 RTL 翻转。它只是把项目顺序倒过来，但文字方向、标点位置、连字逻辑、表单光标走向等仍按 LTR 处理，阿拉伯文会显示错乱，希伯来文输入光标会从左往右跳。必须同时设置容器的 direction: rtl，让浏览器识别语言语义，触发 Unicode 双向算法（BIDI）和字体 OpenType 特性。
常见错误现象：flex-direction: row-reverse 后阿拉伯数字“١٢٣”仍从左往右读、输入框 placeholder 文字方向没变、日期选择器弹出位置偏移。
-
direction: rtl控制文本流、标点避头尾、连字渲染 -
flex-direction: row（默认）+direction: rtl→ 主轴自动右对齐，子项从右向左排列 - 不要单独依赖
flex-direction: row-reverse模拟 RTL，它不改变文本语义 - 若需动态切换，用 JavaScript 切换
data-dir="rtl"类，CSS 中写[data-dir="rtl"] { direction: rtl; }
RTL 下 flex-wrap 换行行为要显式控制
在 direction: rtl 容器中，flex-wrap: wrap 的“换行起点”默认变成右上角，但部分旧版 Safari 和安卓 WebView 会把第一行内容挤到右侧、第二行从左侧开始，造成视觉断层。这不是 bug，是 flex 主轴起点随 direction 改变后，justify-content 缺省值（flex-start）导致的。
解决方法是显式声明换行对齐方式：
- 保持首行靠右：用
justify-content: flex-end - 希望所有行都靠右对齐（更符合 RTL 阅读习惯）：用
justify-content: flex-end+align-content: flex-start - 避免换行错位：禁用
justify-content: space-between或space-around，它们在 RTL 下边缘间距计算易出偏差 - 测试重点：iOS 16+ Safari、Android 12+ Chrome、鸿蒙 Browser
多语言混合排版时，flex-item 内部断行策略不能一刀切
一个 .flex-item 里可能同时出现中文标题、英文 URL、阿拉伯文说明。此时仅靠容器级 direction 不够，每个文本子元素需独立控制断行逻辑：
- 中文/日文/韩文块：设
word-break: keep-all，防止“中华人民共和国”被拆成两行 - 长英文单词或 URL：加
overflow-wrap: break-word，允许在字母间断 - 阿拉伯文段落：禁用
word-break: break-all，否则破坏连字（如 “الكتاب” 变成 “الك تا ب”） - 泰文/缅甸文：用
word-break: normal，依赖 UAX#14 断行规则，确保字体启用 OpenTypelocl和ccmp特性 - 中英混排输入框：推荐组合
word-break: break-word; overflow-wrap: break-word;
Flexbox 替代浮动后，清除浮动类名可直接删除
老项目里满屏的 clearfix、clear: both、overflow: hidden hack，在 Flex 布局中全部失效且有害。因为 display: flex 容器天然不塌陷，子项脱离文档流但不会影响父容器高度计算。
容易踩的坑：
- 保留
.clearfix类并给 flex 容器添加它 → 无害但冗余，增加维护成本 - 在 flex 容器上误加
overflow: hidden→ 可能裁剪掉position: absolute子元素或阴影 - 用
float: left强行嵌套在 flex-item 内 → 破坏弹性行为，导致宽度计算异常 - 迁移时优先删掉所有清除浮动代码，再逐个验证子项高度是否一致（
align-items: stretch默认生效）
最常被忽略的是 writing-mode 和 text-orientation 的配合 —— 比如竖排阿拉伯文需要 writing-mode: vertical-rl; text-orientation: upright;，而 Flex 容器此时主轴方向要相应设为 column，不是简单加 rotate。这点在小程序和 PWA 中尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
