修改首个子元素font-size为何引发flex容器偏移及容器高度变化？

普通容器和flex容器在修改首个子元素font-size时表现不同：

• 普通容器高度会随子元素字号变化而改变
• flex容器会出现上下偏移，且仅修改首个子元素时触发，修改第二个子元素无此问题

需求：如何解决flex容器的偏移问题，使其位置固定？

原代码示例 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #121212;
  color: #fff;
  font-size: 20px;
}

.container {
  line-height: 48px;
  font-size: 36px;
  border: 1px solid #f90;
}

.first {
  color: #ffe47e;
  animation: change1 3s linear infinite;
}

@keyframes change1 {
  0%,
  100% {
    font-size: 0.1em;
  }
  50% {
    font-size: 1em;
  }
}

@keyframes change2 {
  0%,
  100% {
    font-size: 0.1em;
  }
  50% {
    font-size: 2em;
  }
}

.c2 {
  display: inline-flex;
  column-gap: 5px;
}

.c2 .first {
  font-size: 0.5em;
  animation: change2 3s linear infinite;
} 

.c3 .first {
  font-size: 0.5em;
  animation: none;
}

HTML代码 #

<div style="margin-bottom: 50px;">
  <div class="container c2 c3">
    <span class="first">first</span>
    Second
  </div>
  
  <div class="container c2 c3">
    Second
    <span class="first">This doesn't matter</span>
  </div>
  
  (flexbox) How to make the first flex container align with the second one?
</div>

<div style="margin-bottom: 50px;">
  (flexbox) Animation illustration
  
  <div class="container c2">
    <span class="first">first</span>
    Second
  </div>
  
  <div class="container c2">
    Second
    <span class="first">This doesn't matter</span>
  </div>
</div>

(normal container) Animation illustration - Why is height changing?

<div class="container">
  <span class="first">first</span>
  Second
</div>

解决方案 #

原因分析 #

行内flex容器（inline-flex）默认基于内容基线对齐，而flex容器的基线计算优先参考首个flex项的基线。当首个子元素字号变化时，基线位置随之改变，导致整个容器上下偏移；修改第二个子元素时不影响基线计算，因此无偏移问题。

修复方法 #

以下三种方法任选其一即可：

1. 固定容器高度 + 基线对齐
   给.c2类添加样式，固定容器高度并明确基线对齐规则，避免基线波动：

.c2 {
  display: inline-flex;
  column-gap: 5px;
  align-items: baseline;
  height: 48px; /* 和line-height值一致，固定容器高度 */
}

2. 垂直居中对齐
   如果不需要严格的基线对齐，直接设置垂直居中，让元素始终保持容器内居中位置：

.c2 {
  display: inline-flex;
  column-gap: 5px;
  align-items: center;
}

3. 单独固定首个子元素对齐规则
   给首个flex项设置固定的对齐方式，避免其字号变化影响容器基线：

.c2 .first {
  align-self: baseline; /* 或center、flex-start等值 */
}

同时建议给容器添加固定高度，防止高度随字号变化波动。

内容的提问来源于stack exchange，提问作者Aelita