Bagaimana untuk Meregangkan Anak Flex untuk Mengisi Ketinggian Ibu Bapa Tanpa Menetapkan Ketinggian Ibu Bapa?

Meregangkan Anak Fleksibel untuk Mengisi Ketinggian Bekas tanpa Menetapkan Ketinggian Induk

Apabila cuba meregangkan anak lentur kuning untuk mengisi keseluruhan ketinggiannya bekas induk, adalah penting untuk mengelak daripada menetapkan ketinggian induk. Sebaliknya, ketinggian ibu bapa harus dilaraskan secara dinamik berdasarkan kandungan anak biru.

Perangkap biasa apabila bekerja dengan Flexbox ialah penggunaan ketinggian yang berlebihan: 100%. Walaupun ini sering diperlukan dalam konteks lain, ia boleh mengganggu reka letak Flexbox.

Sebab 1: Kebergantungan Ketinggian Ibu Bapa

Apabila menggunakan ketinggian: 100%, induk kepada elemen yang diregangkan juga memerlukan ketinggian yang ditentukan, yang tidak diperlukan oleh Flexbox dalam kebanyakan kes. Ini boleh membawa kepada tingkah laku yang tidak dijangka.

Sebab 2: Pengabaian Elemen Adik Beradik

Jika anak flex mempunyai adik beradik di atas atau di bawahnya, menggunakan ketinggian: 100% akan mengabaikan kehadiran mereka, berpotensi menyebabkan isu reka letak.

Penyelesaian: Alih keluar ketinggian: 100%

Penyelesaian adalah mudah: Alih keluar ketinggian: 100% daripada anak flex kuning. Ini membenarkan gelagat lalai Flexbox untuk mengambil alih.

Gelagat Flexbox Lalai

Untuk item flex yang disusun dalam baris mendatar (lalai), item jajar mengawalnya penjajaran menegak. Secara lalai, ini ditetapkan kepada regangan, yang memenuhi ketinggian bekas secara automatik.

Sampel Kod

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

Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Anak Flex untuk Mengisi Ketinggian Ibu Bapa Tanpa Menetapkan Ketinggian Ibu Bapa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!