為什麼改變子元素的字體大小會導致彈性容器偏離原來的位置？

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來將它們從基線上移開。