为什么改变子元素的字体大小会导致弹性容器偏离原来的位置？

Question

这个问题很奇怪，在普通容器和弹性盒子上表现不同。

改变第一个子元素的字体大小:

• 对于普通容器来说，为什么会改变容器的高度？
• 对于弹性盒子来说，为什么会使得弹性盒子在某些距离上向下或向上移动？

我该如何解决这个问题？我希望弹性盒子不要移动。

据说，只有在更改第一个子元素的字体大小时才会发生这种情况。更改第二个子元素的字体大小并不重要...为什么？

* {
  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;
}

<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>

Answer 1

假设你的第一个文本的字体大小为50px，第二个文本的字体大小为0px，并且你想要切换字体大小。在这一点上，内容的高度为50px。在动画的中间，两个文本的字体大小都变为25px，因此内容的高度也变为25px。在动画结束时，你再次有50px和0px的字体大小，因此内容的高度为50px。

div的高度会根据内容的高度进行调整。

Answer 2

请不要在同一个问题中提出多个问题。

关于“normal”（即块级）容器的第一个问题已经有了重复。在<small>标签使段落的高度变大这个问题中已经详细讨论过了。

对于弹性盒子容器，这是由弹性容器确定其基线的方式决定的。相关规范如下所述：

弹性项目的默认对齐方式是“stretch”，这意味着弹性项目不参与基线对齐，因此第一点不适用。

第二点适用，意味着每个弹性容器的第一个弹性项目提供了各个弹性容器将对齐的基线。

处理这个问题的标准方法是通过给inline-flex或inline-block容器元素设置vertical-align:top来将它们从基线上移开。