CSS弹性布局垂直排列文字技巧

本文深入解析了如何在CSS弹性布局中正确实现文字垂直排列，指出单纯设置writing-mode无法让flex容器内文字真正竖排，关键在于使flex主轴方向（flex-direction）与文本流方向（writing-mode）协同一致：推荐采用flex-direction: column配合子项的writing-mode: vertical-rl，并特别强调vertical-rl会反转width和height的语义——此时width控制竖排文字的视觉“高度”，height反而控制水平尺寸，需用width/min-width约束纵向延展、min-height保障纵向空间；同时提醒IE/Edge兼容性陷阱及常见错位、塌陷问题，帮助开发者避开看似简单实则极易踩坑的垂直排版雷区。

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方向，尺寸和对齐就全乱了。

今天关于《CSS弹性布局垂直排列文字技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！