vertical-rl 使 width 和 height 含义互换，因 width 始终控制行内轴（vertical-rl 下为垂直方向）、height 控制块轴（此时为水平方向），导致视觉上“高度”由 width 决定、“宽度”由 height 决定。
vertical-rl 会让 width 和 height 含义互换
因为 writing-mode: vertical-rl 不是“旋转容器”，而是重定义文本流的块轴（block axis）和行内轴（inline axis）。在默认 horizontal-tb 下，块轴是垂直方向（决定行堆叠），行内轴是水平方向（决定字序）；而 vertical-rl 把块轴转为水平方向（从右到左），行内轴转为垂直方向（从上到下）。CSS 中 width 始终控制行内轴尺寸，height 始终控制块轴尺寸——所以它们的实际作用方向就对调了。
常见错误现象：
- 给
vertical-rl容器设width: 200px; height: 400px，结果视觉上“窄高”变“宽矮” - 用
max-width限制内容宽度，却导致竖排文字被截断（实际限制的是列高） -
min-height: 100vh在竖排容器里让整个区域横向铺满视口
flex 或 grid 容器上直接加 writing-mode 很危险
Flexbox 和 Grid 的主轴（main axis）默认绑定行内轴，交叉轴（cross axis）绑定块轴。一旦父元素设了 writing-mode: vertical-rl，flex-direction: row 就不再是“从左到右”，而是“从上到下”；justify-content: center 会把内容挤到最右边（即新的块轴终点），align-items: flex-start 反而变成“贴底部”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对纯文本容器（如
<p>、<div class="text">）设writing-mode - 需要竖排菜单或卡片布局时，改用
display: flex; flex-direction: column+text-orientation: upright - 绝对不要给
display: grid父容器设writing-mode，gap、grid-template-rows/columns 的行为会彻底失控
text-orientation 不设就等于没设好 vertical-rl
text-orientation 控制字符本身是否旋转，默认值 mixed 是规范行为，但不是可用行为：汉字直立，英文字母和数字顺时针转 90°，导致基线错乱、高度不齐、阅读困难。这不是 bug，是 CSS Writing Modes Level 3 的设计选择。
使用场景与参数差异：
- 纯中文/日文内容：
text-orientation: upright（所有字符强制直立） - 按钮、标签等含简短英文的 UI：
text-orientation: upright，确保可读性 - 局部保留西文旋转（极少数）：
<span style="writing-mode: horizontal-tb">ABC</span>，而不是依赖mixed - 绝对避免
text-orientation: sideways——它会让汉字也躺倒，失去竖排意义
column-count 配合 vertical-rl 才是多栏竖排正解
想实现古籍式三栏竖排？别用 float 或 inline-block 模拟。直接对容器设 writing-mode: vertical-rl，再加 column-count: 3，浏览器会按垂直流自动切分内容，每列从上到下、列间从右到左排列。
关键细节：
-
column-gap控制的是列之间的水平距离（视觉上的“列间距”），单位仍用px或em，无需额外旋转理解 -
column-fill: auto能防止末尾列过短，尤其适合章节结尾处的内容均衡 - 浮动元素（
float: left）在vertical-rl下会变成“向上浮动”，行为不可靠，建议用position: absolute替代
最容易被忽略的点是：盒模型轴向翻转后，padding 和 margin 的方向语义也同步翻转——padding-top 实际影响的是“右侧留白”，margin-right 影响的是“下方间距”。调试时如果发现留白方向反了，先检查是不是忘了这层映射关系。
