当 Flex 容器的首个子元素动态调整 font-size 时，容器会沿行内基线（baseline）发生垂直偏移；而普通块级容器则因行高与字体度量联动导致高度变化。根本原因在于 Flex 容器的基线对齐机制，默认以首个子项的基线为容器基线，可通过 vertical-align: top 或显式基线控制彻底解决。
当 flex 容器的首个子元素动态调整 `font-size` 时，容器会沿行内基线（baseline）发生垂直偏移；而普通块级容器则因行高与字体度量联动导致高度变化。根本原因在于 flex 容器的基线对齐机制，默认以首个子项的基线为容器基线，可通过 `vertical-align: top` 或显式基线控制彻底解决。
在 CSS 布局中，Flex 容器的视觉对齐行为常被误认为由 align-items 或 justify-content 全权决定，但当 Flex 容器以 inline-flex 方式参与行内流（如与文本、其他 inline-block 元素并排）时，其外部对齐方式实际由 CSS 基线（baseline）规则 控制——这正是本问题的核心。
? 为什么只有「第一个子元素」影响偏移？
根据 CSS Flexbox 规范 §8.5，inline-flex 容器的基线默认取自主轴起始位置的首个 Flex 项（即 DOM 中第一个子元素）的基线：
- 若该子项参与 baseline 对齐（如 align-self: baseline），则以其内容基线为准；
- 否则，浏览器会合成一个基线——通常基于其第一行文本的字体度量（如 font-size、line-height、font-family 的 ascent/descent）；
- 因此，当 .first 动态缩放字号（如从 0.1em → 2em），其合成基线位置剧烈变化，导致整个 inline-flex 容器在行内上下浮动。
而第二个子元素不触发此行为，是因为规范明确指定“仅起始/末尾 flex line 的首/末项”参与基线计算，中间项被忽略。
✅ 正确解决方案：脱离基线对齐上下文
最直接、兼容性最佳的方式是让容器不再参与行内基线对齐：
.c2 {
display: inline-flex;
column-gap: 5px;
vertical-align: top; /* ? 关键修复：强制顶部对齐，无视基线 */
}✅ vertical-align: top 使 inline-flex 容器按自身上边界对齐父行盒（line box）顶部，完全绕过基线计算逻辑。
✅ 同样适用 vertical-align: middle、vertical-align: bottom 或 vertical-align: text-top，按需选择语义对齐方式。
? 不推荐的“伪解法”及风险
- ❌ 移除 inline-flex 改用 flex + display: block：会破坏行内布局意图（如需与文字同行显示时失效）；
- ❌ 强制所有子项 align-self: baseline：反而加剧基线耦合，且无法解决合成基线漂移；
- ❌ 给首项设 font-size: inherit 或固定值：牺牲动画需求，治标不治本。
? 进阶建议：显式控制基线（现代方案）
若需更精细控制（如保持基线对齐语义），可使用 CSS align-content 配合 baseline，或为容器添加 ::before 伪元素锚定基线（需配合 content: "" + vertical-align: baseline）。但对绝大多数场景，vertical-align: top 是简洁、可靠、零副作用的选择。
? 总结
| 场景 | 根本原因 | 推荐解法 |
|---|---|---|
| inline-flex 容器因首子元素 font-size 变化而上下偏移 | Flex 容器默认以首个子项合成基线作为自身基线，参与行内对齐 | 添加 vertical-align: top（或其他非 baseline 值） |
| 普通块级容器高度随子元素字号变化 | 行高继承与字体度量（ascent/descent）共同决定 line-height 实际占用空间 | 设置 line-height: 1 或 line-height: normal 并显式控制 min-height |
只要记住：inline-flex 是行内级元素，它的外部对齐听命于 vertical-align，而非 align-items——这是解开所有“莫名偏移”谜题的钥匙。
