Mengapa Anak Flex Saya Tidak Memenuhi Ketinggian Bekas?

Cara Meregangkan Kanak-Kanak Flex untuk Mengisi Ketinggian Bekas

Apabila bekerja dengan Flexbox, adalah perkara biasa untuk menghadapi isu di mana elemen kanak-kanak tidak meregang ke ketinggian penuh bekasnya. Ini selalunya disebabkan oleh penggunaan ketinggian yang salah: 100% harta.

Dalam Flexbox, ketinggian: 100% harta boleh menjadi masalah kerana:

• Elemen induk memerlukan tetapan ketinggian, yang bertentangan dengan prinsip Flexbox.
• Apabila berbilang kanak-kanak hadir, menggunakan ketinggian: 100% pada seorang kanak-kanak akan mengabaikan yang lain.

Penyelesaian adalah untuk membuang ketinggian: 100% harta dan bergantung pada tingkah laku lalai Flexbox. Secara lalai, lenturkan item dalam arah baris (reka letak biasa) dijajarkan secara menegak dengan item penjajaran sifat: regangan. Ini bermakna elemen anak akan meregang secara automatik untuk mengisi ketinggian bekas yang tersedia.

Berikut ialah contoh yang menunjukkan penggunaan yang betul tanpa ketinggian: 100%:

<code class="html"><div style='display: flex'>
  <div style='background-color: yellow; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div></code>

Dalam contoh ini , kanak-kanak kuning akan meregangkan untuk memenuhi ketinggian bekas, tanpa mengira ketinggian teks kanak-kanak biru. Ini kerana item penjajaran lalai: nilai regangan memastikan item fleksibel diregangkan secara menegak untuk menduduki ruang yang tersedia.

Atas ialah kandungan terperinci Mengapa Anak Flex Saya Tidak Memenuhi Ketinggian Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!