Mengapakah menukar saiz fon elemen kanak-kanak menyebabkan bekas fleksibel menyimpang daripada kedudukan asalnya?

Question

Masalah ini sangat pelik, ia berkelakuan berbeza pada bekas biasa dan kotak fleksibel.

Tukar saiz fon elemen anak pertama:

• Untuk bekas biasa, kenapa ketinggian bekas berubah?
• Untuk kotak anjal, kenapa ia menyebabkan kotak anjal bergerak ke bawah atau ke atas pada jarak tertentu?

Bagaimana saya boleh menyelesaikan masalah ini? Saya mahu flexbox tidak bergerak.

Sepatutnya, ini hanya berlaku apabila menukar saiz fon elemen anak pertama. Menukar saiz fon elemen anak kedua tidak penting... kenapa?

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

Andaikan teks pertama anda mempunyai saiz fon 50px dan teks kedua anda mempunyai saiz fon 0px dan anda ingin menukar saiz fon. Pada ketika ini, ketinggian kandungan ialah 50px. Di tengah-tengah animasi, saiz fon kedua-dua teks berubah kepada 25px, jadi ketinggian kandungan juga berubah kepada 25px. Pada penghujung animasi anda sekali lagi mempunyai saiz fon 50px dan 0px, jadi ketinggian kandungan ialah 50px.

Ketinggian div akan dilaraskan mengikut ketinggian kandungan.

Answer 2

Sila jangan tanya berbilang soalan dalam soalan yang sama.

Soalan pertama tentang bekas "biasa" (iaitu tahap blok) telah diduplikasi. Masalah membuat perenggan lebih besar dengan tag <kecil> telah dibincangkan secara terperinci.

Untuk bekas flex, ini ditentukan oleh cara bekas flex menentukan garis dasarnya. Spesifikasi yang berkaitan dinyatakan di bawah:

Penjajaran lalai item flex ialah "regangan", yang bermaksud item flex tidak mengambil bahagian dalam penjajaran garis dasar, jadi titik pertama tidak terpakai.

Mata kedua terpakai, bermakna item lentur pertama setiap bekas lentur menyediakan garis dasar yang akan diselaraskan dengan bekas lentur individu.

Cara standard untuk menangani masalah ini adalah dengan mengalihkan elemen bekas sebaris-flex atau blok sebaris dari garis dasar dengan menetapkan vertical-align:top padanya.