直接给display: flex父容器设writing-mode: vertical-rl会导致flex布局逻辑翻转：flex-direction: row变为从上到下堆叠，justify-content: center变为垂直居中，align-items: stretch可能引发子项高度塌陷或溢出。
flex容器里加writing-mode: vertical-rl会出什么问题？
直接给display: flex的父容器设writing-mode: vertical-rl，会导致整个flex布局逻辑翻转：原本flex-direction: row变成“从上到下堆叠”，justify-content: center变成垂直居中，align-items: stretch可能让子项高度塌陷或溢出。这不是bug，是规范行为——writing-mode改变了块级格式化上下文的坐标系，但flex仍按新坐标系解释方向。
常见错误现象：
- 子项消失或挤成一条线
- width/height尺寸错乱，文字被截断
- margin-top跑到顶部以外，padding-right出现在左侧
vertical-rl必须配text-orientation: upright才能让汉字直立
writing-mode: vertical-rl只改文本流方向（从左→右 → 从上→下），不控制单个字符是否旋转。默认text-orientation: mixed会让英文字母、数字、半角标点顺时针转90°，而汉字直立——这在混排场景下造成基线错位、视觉参差。
要确保所有字符（包括中文）都保持直立，必须显式声明：
- text-orientation: upright（推荐用于按钮、标签、导航项）
- 避免用text-orientation: sideways，它会让汉字也躺倒，Firefox还不支持
注意：text-orientation只能作用于块级或行内块元素，对纯<span></span>无效；若需局部英文横排，得用<span style="writing-mode: horizontal-tb"></span>包裹
vertical-rl下width和height的含义完全对调
开启writing-mode: vertical-rl后，CSS尺寸属性的语义反转：
- width控制的是“视觉高度”（即竖排文字列的长度）
- height控制的是“视觉宽度”（即整段文字占多少列）
- line-height此时控制列间距，不是行间距
所以必须显式设置：
- 用width约束竖排文字“高度”，例如width: 2em
- 用min-height保障纵向空间（别用height: auto，它会失效）
- 若内容超长需滚动，加overflow-y: auto和-webkit-overflow-scrolling: touch
真正安全的垂直flex布局组合
想让文字竖排且子项垂直堆叠，不要强行旋转，而是让flex主轴与文字流向一致：
- ✅ 推荐方案：flex-direction: column + 子项设writing-mode: vertical-rl + text-orientation: upright
- ✅ 替代方案：flex-direction: column + 子项保持writing-mode: horizontal-tb（适合标题列表等横排需求）
- ❌ 危险组合：flex-direction: row + writing-mode: vertical-rl（子项被拉成高窄条，极易换行异常或溢出）
关键点：
- writing-mode只应加在纯文本块（如<p></p>、<div class="text">）上<br>
- flex容器本身保持默认<code>writing-mode: horizontal-tb
- 所有物理方向属性（margin-left、padding-bottom）必须换成逻辑属性（margin-inline-start、padding-block-end）
