Warum führt eine Änderung der Schriftgröße eines untergeordneten Elements dazu, dass der Flex-Container von seiner ursprünglichen Position abweicht?

Question

Dieses Problem ist sehr seltsam, es verhält sich bei normalen Containern und Flexboxen unterschiedlich.

Ändern Sie die Schriftgröße des ersten untergeordneten Elements:

• Warum ändert sich bei gewöhnlichen Behältern die Höhe des Behälters?
• Warum bewegt sich die elastische Box bei der elastischen Box in einem bestimmten Abstand nach unten oder oben?

Wie kann ich dieses Problem lösen? Ich möchte, dass sich die Flexbox nicht bewegt.

Angeblich passiert dies nur, wenn die Schriftgröße des ersten untergeordneten Elements geändert wird. Das Ändern der Schriftgröße des zweiten untergeordneten Elements ist nicht wichtig ... warum?

* {
  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来将它们从基线上移开。