Bagaimana Meregangkan Anak Fleksibel untuk Mengisi Ketinggian Bekas dalam Flexbox Tanpa Menetapkan Ketinggian Tetap?

Meregangkan Anak Fleksibel untuk Mengisi Ketinggian Bekas

Apabila bekerja dengan Flexbox, adalah penting untuk memahami kesan penetapan sifat ketinggian. Tidak seperti reka letak tradisional, Flexbox mengendalikan ketinggian secara berbeza.

Isu:

Dalam contoh yang disediakan, matlamat adalah untuk meregangkan div anak kuning untuk mengisi keseluruhan ketinggian induk bekas, tanpa menetapkan ketinggian tetap untuk induk. Ketinggian ibu bapa harus disesuaikan berdasarkan kandungan teks div anak biru.

Kesilapan:

Lazimnya, seseorang mungkin cuba menetapkan ketinggian: 100% pada kuning kanak-kanak untuk mencapai kesan ini. Walau bagaimanapun, dalam Flexbox, pendekatan ini selalunya gagal.

Penjelasan:

Apabila menggunakan ketinggian: 100% dalam Flexbox, elemen induk (atau adik beradik dalam kes arah baris) memerlukan ketinggian yang ditentukan, yang tidak selalu diingini atau mungkin, terutamanya apabila bergantung pada kandungan dinamik. Selain itu, ketinggian: 100% pada berbilang kanak-kanak dalam bekas yang sama boleh membawa kepada hasil yang tidak dijangka.

Penyelesaian:

Penyelesaian sangat mudah: alih keluar ketinggian: 100% daripada anak kuning. Secara lalai, item lentur dalam arah baris diregangkan secara menegak mengikut sifat item jajar. Memandangkan nilai lalainya ialah regangan, anak kuning akan mengisi ketinggian bekas secara automatik.

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

Dengan mengalih keluar ketinggian: 100%, anak kuning kini meregang untuk memadankan ketinggian anak biru dan bekas ibu bapa, tanpa menjejaskan ketinggian dinamik ibu bapa. Penyelesaian ini memanfaatkan mekanik semula jadi Flexbox untuk mencapai hasil yang diinginkan.

Atas ialah kandungan terperinci Bagaimana Meregangkan Anak Fleksibel untuk Mengisi Ketinggian Bekas dalam Flexbox Tanpa Menetapkan Ketinggian Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!