ruby标签不支持display:flex，因其语义化内联特性与flexbox渲染逻辑冲突；浏览器强制将其display回退为inline，内部rb/rt结构受原生排版规则约束，flex-direction等属性无效。

ruby 标签本身不支持 display: flex，强行设置会失效或触发浏览器自动修正 —— 因为 ruby 是语义化内联容器，其内部结构（rb、rt、rp）受严格渲染规则约束，Flexbox 的主轴/交叉轴逻辑与之冲突。

为什么 ruby 不能直接设为 flex

浏览器对 ruby 元素有强制的默认 display 计算逻辑：ruby 必须是 inline 或 inline-table，rb/rt 必须是 table-cell 或类似行为。即使你写 display: flex，Chrome/Firefox/Safari 都会无视它，回退到内置渲染模型。

• 检查元素 computed styles 会看到 display 值仍是 inline，而非你写的 flex
• flex-direction、justify-content 等属性在 ruby 上完全无效果
• 若强行包裹一层 span 并设 display: flex，只会影响该 wrapper，不影响 ruby 内部排版

想用 Flex 控制 ruby 整体位置？用父容器

真正可控的 Flex 操作点，在 ruby 的**父级块容器**上，比如 div 或 p：

• 把 ruby 当作一个「行内原子」，放进 display: flex 的父容器里，它就和其他子元素一样参与主轴对齐
• 用 align-items: center 可垂直居中 ruby（相对于父容器高度）
• 用 gap 控制它和相邻文字/图标的间距，比 margin 更可靠

示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<div style="display: flex; align-items: center; gap: 8px;">
  <p>汉字</p>
  <ruby><rb>漢</rb><rt>hàn</rt></ruby><span>英文</span>
</div>

想调整 ruby 内部 rt（注音）的位置？别碰 Flex，用原生属性

ruby 的排版控制权不在 CSS Flex，而在 HTML 属性和少数 CSS 属性：

• 用 ruby-position: over | under 切换注音在上方还是下方（注意：IE 不支持）
• 用 ruby-align: start | center | end | space-between 控制注音相对于基字的水平对齐
• 避免给 rt 设 margin 或 transform，容易破坏对齐基准线
• 如需微调垂直距离，优先试 line-height 或 font-size 缩放整个 ruby，而非单独动 rt

替代方案：不用 ruby，自己用 Flex 模拟

如果业务场景需要高度定制（比如 rt 要右对齐、带背景、可交互），放弃原生 ruby 更实际：

• 用 div 包住基字和注音，设 display: flex; flex-direction: column;
• 基字设 order: 1，注音设 order: 0，实现「注音在上」效果
• 加 align-self: flex-end 让注音右对齐，这是原生 ruby 做不到的
• 注意语义损失：需补 aria-label 或 role="text" 保证读屏器识别

关键点始终是：Flex 是布局工具，ruby 是语义+排版一体化标签 —— 它们职责不同，硬凑反而让样式不可预测、可访问性下降。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！