要让flex容器中文字真正垂直排列，必须使flex主轴方向与writing-mode的文本流方向一致：推荐使用flex-direction: column配合writing-mode: vertical-rl；同时注意vertical-rl下width控制视觉高度、height控制水平尺寸，需用width/min-width约束竖排文字“高度”，并设置min-height保障纵向空间。
flex容器里文字不垂直？先确认writing-mode是否生效
很多同学给div加了writing-mode: vertical-rl，但文字还是横着排——根本原因是writing-mode作用在**文字本身**，而flex布局的主轴方向由flex-direction控制，两者不自动同步。必须让flex主轴和文字块内行进方向对齐，否则文字会被强行“拉伸”或错位。
-
writing-mode只改变单个元素内文本流方向（如span、p），不影响其父级flex容器的布局逻辑 - 如果父容器是
display: flex且flex-direction: row（默认），它仍按水平方向排列子项，哪怕子项文字是垂直的 - 常见错误现象：
flex-direction: row+writing-mode: vertical-rl→ 文字被旋转90°但子项仍水平堆叠，视觉上像“一列字被压扁成一条线”
垂直flex布局的两种可靠组合方式
要让文字真正“竖着排、从上到下堆”，得同时协调flex方向和文字书写方向。关键不是强行旋转，而是让主轴变成垂直方向，再让文字自然沿主轴流动。
- 方案一（推荐）：
flex-direction: column+writing-mode: horizontal-tb→ 子项垂直堆叠，文字保持常规横排，适合中文标题、标签列表等场景 - 方案二（真垂直）：
flex-direction: column+ 子项设writing-mode: vertical-rl→ 子项垂直堆叠，每个子项内文字从右往左竖排（符合传统中文竖排习惯） - 别用
flex-direction: row配writing-mode: vertical-rl：flex强行把“高条状”的垂直文字当“宽条状”水平排，容易溢出或换行异常
flex-item高度塌陷？vertical-rl下line-height和height行为不同
开启writing-mode: vertical-rl后，line-height不再控制上下间距，而是控制**左右间距**（即字符间横向距离），而height实际控制的是文字块的“宽度”。这会导致flex子项高度计算异常，尤其在align-items: stretch时。
- 现象：
flex-direction: column下，子项设height: 100px+writing-mode: vertical-rl→ 实际占用空间远小于100px，看起来“缩进”了 - 原因：此时
height变成了“垂直文字块的水平尺寸”，真正控制纵向空间的是width - 解法：统一用
min-width或width约束竖排文字的“宽度”（即视觉上的高度），再用min-height保障最小纵向空间 - 示例：
.item { writing-mode: vertical-rl; width: 2em; /* 控制竖排文字“高度” */ min-height: 40px; /* 保证纵向留白 */ }
IE/Edge旧版兼容性陷阱：flex + writing-mode混合支持差
IE11对writing-mode的支持仅限于vertical-rl和vertical-lr，且与flex嵌套时存在渲染bug：文字可能截断、基线偏移、或flex子项尺寸归零。
立即学习“前端免费学习笔记（深入）”；
- IE11中，
flex-direction: column+writing-mode: vertical-rl常导致子项height计算为0，需手动加min-height: 1px兜底 - Edge 16–18虽支持二者，但
align-items: center在vertical-rl下会错位，建议改用justify-content: center（此时主轴是column，justify对应垂直居中） - 若必须兼容IE，优先选方案一（
column+ 横排文字），避免依赖vertical-rl的复杂布局
实际项目里最易忽略的，是writing-mode改变了盒模型中width/height的语义——它不是CSS transform那种视觉旋转，而是彻底重定义了坐标系。一旦混用flex主轴和writing-mode方向，尺寸和对齐就全乱了。
