vertical-rl 会彻底翻转盒模型的宽高语义
设 writing-mode: vertical-rl 后，CSS 中的 width 和 height 含义互换：原来控制水平尺寸的 width 现在决定文字“列高”（即每列能容纳多少行字），height 则决定“列宽”（即整个竖排区域从右到左占多少空间）。不调整就会出现文字被截断、容器留大片空白或子元素溢出。
实操建议：
- 固定高度的竖排容器，应把预期的“视觉宽度”赋给
height，把预期的“视觉高度”赋给width - 用
max-width替代width防止内容撑破布局 - 避免对
vertical-rl容器同时设min-height和min-width，容易触发不可预测的收缩行为
别在 flex 或 grid 容器上直接设 writing-mode
给 display: flex 的父元素加 writing-mode: vertical-rl，会让 flex-direction: row 不再是“横向排列”，而是沿垂直主轴堆叠；justify-content 和 align-items 的左右/上下含义全反，子项极易重叠、消失或错位。
常见错误现象：
- 导航菜单项全部挤在顶部一像素内
-
justify-content: center把内容推到最右边（本意是水平居中） - 设置
gap后间隙方向与预期垂直
正确做法：只对纯文本块（如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div class="text-block">）应用 <code>writing-mode；若需竖排菜单，改用 flex-direction: column + text-orientation: upright。
text-orientation 必须显式设置，否则中英文混排错乱
默认 text-orientation: mixed 会让汉字直立、英文字母和数字顺时针旋转 90°，导致基线不齐、字符高度参差——这不是 bug，是规范行为，但实际效果难看。
使用场景与选择：
- 纯中文古籍/诗文：用
text-orientation: upright，所有字符强制直立 - 按钮、标签等含简短英文的 UI 元素：统一用
text-orientation: upright，确保可读性 - 需要保留西文旋转效果（极少数设计需求）：局部包裹英文并设
writing-mode: horizontal-tb，而非依赖mixed - 绝对不要用
text-orientation: sideways，它会让汉字也躺倒，失去竖排意义
多列竖排要用 column-* 配合 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替代 - 标点符号（如句号、顿号）会自动适配竖排位置，但需测试字体是否启用
font-feature-settings: "vert"
最易被忽略的一点：vertical-rl 在部分旧版 Safari 和 Android WebView 中对 column-* 属性支持不完整，上线前务必在目标设备上实测多列分栏是否断裂或错位。
