当 Flex 容器的首个子元素动态改变 font-size 时，容器会意外上下偏移；这是由于其基线（baseline）随首个子项字体尺寸变化而浮动所致，本质是 CSS Flex 基线对齐机制的默认行为。解决方法是显式重置 vertical-align 或禁用基线对齐依赖。
当 flex 容器的首个子元素动态改变 `font-size` 时，容器会意外上下偏移；这是由于其基线（baseline）随首个子项字体尺寸变化而浮动所致，本质是 css flex 基线对齐机制的默认行为。解决方法是显式重置 `vertical-align` 或禁用基线对齐依赖。
在 CSS 布局中，inline-flex（或 inline-block）容器默认以基线（baseline）方式参与行内格式化上下文（IFC）对齐——这意味着多个并排的 inline-flex 容器会像文字一样，依据各自内部的“文本基线”自动对齐。而根据 CSS Flexbox 规范 §8.5，当 flex 容器未启用 align-items: baseline 且子项未显式参与基线对齐时，其基线将由第一个 flex item 的基线决定（若该子项无自然基线，则从其 border box 合成）。
因此，当你对 .first 元素应用 font-size: 0.1em → 2em 的动画时，其内容高度与基线位置剧烈变化，导致整个 inline-flex 容器的基线随之浮动，进而使容器在行内流中上下“抖动”，表现为视觉上的偏移。值得注意的是：
✅ 仅影响首个子元素（规范明确指定“startmost flex item”）；
✅ 第二个及后续子项字号变化无影响（不参与基线计算）；
✅ 普通块级容器（如 display: block）高度变化则源于 line-height 与 font-size 的继承/层叠关系（如 改变行高），属不同机制。
✅ 推荐解决方案：强制脱离基线对齐
最简洁、兼容性好（支持所有现代浏览器）的方式是为 inline-flex 容器添加：
.c2 {
display: inline-flex;
column-gap: 5px;
vertical-align: top; /* ? 关键修复：脱离 baseline 对齐 */
}vertical-align: top（或 middle / bottom）会使容器不再按基线对齐，而是按指定边缘对齐，彻底规避基线浮动问题。此时，无论 .first 字号如何动画，容器在垂直方向的位置都将保持稳定。
? 其他可选方案（按优先级排序）
| 方案 | 代码示例 | 说明 |
|---|---|---|
| ① 改用 display: flex + 包裹容器 |
… |
彻底退出 IFC，避免基线对齐场景；适合布局主导场景。 |
| ② 强制首个子项不贡献基线 | .c2 .first { align-self: flex-start; } + .c2 { align-items: flex-start; } | 配合 align-items: flex-start 可削弱基线依赖，但不如 vertical-align 直接可靠。 |
| ③ 使用 align-items: stretch 并固定高度 | .c2 { align-items: stretch; min-height: 48px; } | 适用于高度可控场景，但无法解决动画中基线跳变。 |
⚠️ 注意事项
- ❌ 不要仅靠 line-height: 1 或 font-size: 0 试图“隐藏”基线——基线仍存在，合成逻辑可能引发意外；
- ❌ 避免滥用 transform: translateY() 补偿偏移——治标不治本，响应式或缩放下易失效；
- ✅ 若需保留基线对齐语义（如图文混排对齐图标与文字），应统一控制所有相关容器的 font-size 和 line-height，确保基线一致；
- ✅ 在调试时，可用 Chrome DevTools 的 Layout Panel → Show baselines 功能直观查看基线位置变化。
✅ 总结
Flex 容器因首个子元素 font-size 变化而偏移，根本原因在于 inline-flex 在行内上下文中依赖首个子项基线进行对齐。vertical-align: top 是最轻量、最鲁棒的修复手段——它不改变布局模型，不增加 DOM 层级，且完全符合规范。在构建动画组件、标签云、评分徽章等含动态字号的内联 Flex 组件时，务必主动设置此项，以保障视觉稳定性与布局可预测性。
