flex-item默认min-width:auto会锁死换行，必须显式设min-width:0才能解锁收缩；搭配flex:1 1 0、overflow-wrap:break-word及direction/writing-mode响应式更新，方可适配中英文混排、rtl及东南亚文字。
flex-item 默认 min-width: auto 会锁死换行判断
多语言切换时，中英文混排或阿拉伯文/泰文等无空格语言常导致同一容器内文字视觉长度差异极大——但 Flex 布局不会因此自动调整换行点。根本原因在于：flex-item 默认 min-width: auto，浏览器把它理解为“至少要容纳所有内联内容的最小宽度”，哪怕你写了 overflow-wrap: break-word，它也优先保内容、拒收缩。
必须显式覆盖这个默认行为：
-
min-width: 0是最直接解法，告诉浏览器“允许缩到 0，别硬撑” - 搭配
flex: 1或flex-basis: 0使用，否则min-width: 0单独加可能无效 - 若子项含图片或图标，需额外设
max-width: 100%防溢出
word-break 和 overflow-wrap 在不同语言下不能一招鲜
中文、日文、韩文（CJK）和阿拉伯文、泰文对“可断点”的定义完全不同。用 word-break: break-all 强制断字，在中文里会把“人工智能”切成“人工/智能”，在阿拉伯文里则破坏连字（ligature），导致显示异常甚至无法阅读。
按语言类型分情况设置更稳妥：
- CJK 文本：优先
word-break: keep-all+overflow-wrap: break-word（长 URL 可断） - 阿拉伯文/希伯来文：禁用
break-all，用word-break: normal+direction: rtl - 泰文/缅甸文：依赖 Unicode 断行规则，
word-break: normal最安全，确保字体支持 OpenType 特性 - 中英混排标题：用
overflow-wrap: break-word+word-break: break-word（注意不是break-all）
flex-wrap: wrap 在 Safari 8–9 和 IE11 下根本不认标准写法
多语言站点往往还要兼容老版本浏览器。Safari 8–9 和 IE10–11 对 flex-wrap 的识别极不统一：IE 只认 -ms-flex-wrap，Safari 8–9 则对 flex-basis 和 min-width 的优先级处理混乱，导致换行点错位或完全不换。
兼容写法必须带前缀和基准值：
- 父容器加双声明：
display: -ms-flexbox; display: flex;+-ms-flex-wrap: wrap; flex-wrap: wrap; - 子项避免
flex: 1，改用flex: 0 0 33.33%或具体像素值（如flex-basis: 200px） - IE 下务必加
box-sizing: border-box，否则 padding/border 会让百分比计算溢出 - Safari 8–9 可加专属媒体查询：
@media screen and (-webkit-min-device-pixel-ratio: 0) { .container { -webkit-flex-wrap: wrap; } }
动态语言切换时，direction 和 writing-mode 必须响应式更新
单纯靠 CSS 类名切换 direction: ltr/rtl 不够——如果父容器是 display: flex，且子项用了 flex-direction: row，那么 RTL 语言下主轴方向不会自动翻转，按钮、图标、文字顺序仍按 LTR 排列，造成语义错乱。
关键动作是让布局层真正响应语言方向：
- 语言容器（如
）上设direction，并让所有 flex 容器继承它 - 避免在子项上硬编码
float: right或margin-left: auto，这些会覆盖 flex 的方向逻辑 - 需要垂直书写（如蒙古文、部分古籍排版）时，用
writing-mode: vertical-lr替代旋转 hack - 测试时打开 DevTools，手动改
direction值，观察 flex 主轴是否同步反转
最易被忽略的是：多语言换行问题从来不是单一 CSS 属性能解决的，它是 min-width、flex-basis、word-break、direction 四者在渲染流程中先后作用的结果。任何一个环节没对齐语言特性，都会在某个语种下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
