writing-mode: vertical-rl 是实现中文竖排文字的唯一语义正确方案，它精准映射“从上到下、从右到左”的传统阅读流，确保渲染、标点、可访问性全部对齐，而 flex-direction: column 仅控制子元素纵向堆叠，不改变文字书写方向。
writing-mode: vertical-rl 是实现中文竖排文字的唯一语义正确方案；flex-direction: column 只能实现“子元素纵向堆叠”，不能让单行文字本身垂直排列——两者解决的是完全不同的问题，混用反而导致布局错乱。
为什么 writing-mode: vertical-rl 是中文竖排的硬性要求
中文传统阅读流是“从上到下、从右到左”，writing-mode: vertical-rl 正好映射这一逻辑：block-start 指顶部，inline-end 指右侧，浏览器渲染、标点定位、可访问性（如屏幕阅读器顺序）全部对齐。若误用 vertical-lr，第一列会出现在最左边，整段文字需从左往右逐列读，违背常识。
-
text-orientation: mixed是默认值，会让英文字母和数字顺时针旋转 90°，汉字直立——基线不齐、高度参差，实际效果难看 - 要英文可读（如按钮文字），必须显式设
text-orientation: upright - 绝对不要在
display: flex或display: grid的父容器上直接加writing-mode，它会反转justify-content和align-items的语义，子元素极易堆叠溢出
flex-direction: column 真正的作用是控制子元素堆叠方向，不是让文字变竖
当父容器设为 display: flex; flex-direction: column，子元素（比如多个 <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>）会自上而下排列，但每个 <p></p> 内部的文字仍是横向流动的。它解决的是“多块内容纵向布局”，不是“单块文字纵向书写”。
- 常见错误：给导航菜单容器加
flex-direction: column后发现文字“躺平了”——其实文字根本没变，只是菜单项被拉成一列了 - 若真想让菜单文字也竖着，得在每个菜单项内单独加
writing-mode: vertical-rl，并配text-orientation: upright - 父容器必须有明确高度（如
height: 100vh）或min-height，否则justify-content: center无法生效
容器尺寸与方向属性的联动陷阱
一旦启用 writing-mode: vertical-rl，CSS 中的宽高概念就对调了：width 控制的是“列高”（即每行文字的高度），height 控制的是“列宽”（即整个竖排区域的水平空间）。不调整就会文字截断或大片留白。
- 原写法：
width: 200px; height: 400px;→ 竖排后变成“每列高 200px，共占 400px 宽” - 应改为：
width: 400px; height: 200px;才能保持视觉尺寸一致 -
line-height在竖排中仍控制行距，但方向变为垂直方向间距，数值含义不变 - 旧版 Safari 对
writing-mode支持不稳定，生产环境建议加降级：transform: rotate(90deg)+transform-origin: left top，但需手动处理容器尺寸和交互热区偏移
中英文混排时 text-orientation 必须显式声明
不设 text-orientation 就用默认的 mixed，会导致英文字符旋转、汉字直立，同一行里高低错落，尤其在按钮、标签等小尺寸场景下极其突兀。
- 要印刷级效果：汉字直立 + 英文旋转 → 用
text-orientation: mixed，再对英文部分单独包裹<span style="writing-mode: horizontal-tb">API</span> - 要统一可读性（推荐）：所有字符强制直立 →
text-orientation: upright - 绝不可用
text-orientation: sideways，它会让汉字也躺倒，彻底失去竖排意义
真正容易被忽略的是：竖排不是加一个属性就能完事，它牵动了整个盒模型的方向语义、尺寸定义、对齐逻辑和可访问性链路。哪怕只改一行 CSS，也要同步检查 width/height、text-orientation、容器 display 类型和父级 overflow 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
