当 Flex 容器内首个子元素的 font-size 动态变化时，容器会沿行内基线（baseline）上下偏移；而普通块级容器则因行高继承与内联格式化上下文导致高度波动。根本原因在于 Flex 容器的基线由首个 flex item 决定，且默认参与行内对齐。
当 flex 容器内首个子元素的 `font-size` 动态变化时，容器会沿行内基线（baseline）上下偏移；而普通块级容器则因行高继承与内联格式化上下文导致高度波动。根本原因在于 flex 容器的基线由首个 flex item 决定，且默认参与行内对齐。
在 CSS 布局中，inline-flex（或 display: inline-flex）容器本质上是行内级元素，它会像 或 一样参与父容器的行内格式化上下文（Inline Formatting Context），并默认按 vertical-align: baseline 对齐。这意味着多个 inline-flex 容器会依据各自的基线（baseline） 进行垂直对齐——而该基线并非容器底部，而是其内部第一个 flex item 的文本基线。
? 为什么只有「第一个子元素」影响偏移？
根据 CSS Flexbox 规范 §8.5，当 flex 容器为 inline-flex 且未显式设置 align-items: baseline 时，其自身在行内上下文中的基线由首行中最靠前的 flex item 的基线决定（规范第2条）：
Otherwise, if the flex container has at least one flex item, the flex container’s first main-axis baseline set is generated from the alignment baseline of the startmost flex item.
由于你的 .c2 容器中 是首个子元素，且其 font-size 在动画中剧烈变化（如 0.1em → 2em），其字体度量（ascent/descent）、行高贡献及合成基线位置随之大幅波动，直接导致整个 inline-flex 容器的基线“跳变”，从而在视觉上表现为容器上下浮动。
立即学习“前端免费学习笔记（深入）”；
相比之下，第二个 flex item（如 "Second" 文本）不参与基线计算（非 startmost），因此修改它的字号毫无影响。
✅ 正确解决方案：脱离基线对齐
最简洁、兼容性最佳的方式是将 inline-flex 容器从行内基线对齐中移除，统一使用 vertical-align: top（或 middle/bottom）：
.c2 {
display: inline-flex;
column-gap: 5px;
vertical-align: top; /* ? 关键修复：强制顶部对齐 */
}✅ 效果：所有 .c2 容器不再依赖动态基线，而是严格按上边缘对齐，彻底消除因首子元素字号动画引发的抖动。
? 补充说明：vertical-align 仅对 inline、inline-block、inline-flex、inline-table 等行内级盒子生效。对 display: flex（块级）容器无效——但你的场景中正是 inline-flex，故此方案精准命中。
⚠️ 其他常见误区与注意事项
- 不要滥用 align-items: baseline：这会让 flex items 主动参与基线对齐，反而加剧问题；
- 避免重置 line-height 于 flex 容器：.container { line-height: 48px } 会影响匿名文本节点（如 "Second" 前后的空格/换行），间接干扰基线计算，建议移除或设为 normal；
- font-size 动画慎用极小值：font-size: 0.1em 可能触发浏览器渲染异常（如基线塌陷或字体度量失真），推荐下限设为 0.5em 或配合 transform: scale() 实现更稳定的缩放效果；
- 验证是否真需 inline-flex：若容器无需与其他行内元素并排，改用 display: flex + margin 控制间距，可天然规避基线问题。
✅ 最终推荐代码结构
.c2 {
display: inline-flex;
column-gap: 5px;
vertical-align: top; /* ✅ 核心修复 */
/* 移除可能干扰的 line-height */
}
/* 可选：增强动画稳定性 */
.c2 .first {
font-size: 0.5em;
animation: change2 3s linear infinite;
/* 避免基线突变，可添加 */
transform-origin: left top;
}通过理解 CSS 基线机制并主动控制 vertical-align，你不仅能稳定 Flex 容器的位置，还能建立起对行内布局更深层的掌控力——这正是专业前端开发者区别于“样式拼凑者”的关键一课。
