Rumah  >  Artikel  >  hujung hadapan web  >  Mengapakah \"ketinggian: 100%\" pada Flex Child Break Flexbox?

Mengapakah \"ketinggian: 100%\" pada Flex Child Break Flexbox?

Barbara Streisand
Barbara Streisandasal
2024-10-31 02:19:01941semak imbas

Why Does

Regangan Anak Fleksibel untuk Mengisi Ketinggian Bekas Tanpa Ketinggian Induk Eksplisit

Dalam situasi di mana kita perlu meregangkan anak flex untuk mengisi keseluruhan bekas ketinggian, memastikan ketinggian ibu bapa bergantung pada kandungan anak lain, menetapkan "ketinggian: 100%" pada kanak-kanak boleh membawa kepada tingkah laku yang tidak dijangka dalam Flexbox.

Mengapa Menggunakan "tinggi: 100%" Boleh Break Flexbox

Apabila menggunakan "ketinggian: 100%" dalam Flexbox:

  • Induk elemen yang diregangkan memerlukan ketinggian yang diisytiharkan, yang bertentangan dengan tingkah laku lalai Flexbox.
  • Jika terdapat kanak-kanak lain di atas atau di bawah elemen regangan, "ketinggian: 100%" akan mengabaikan kehadiran mereka dan membawa kepada konflik.

Penyelesaian: Alih keluar " ketinggian: 100%"

Untuk mencapai regangan yang diingini tanpa memecahkan Flexbox, cuma keluarkan "ketinggian: 100%" daripada elemen kanak-kanak.

Penjelasan

Dalam Flexbox dengan arah baris (lalai), sifat "align-item" mengawal gelagat menegak. Tetapan lalainya ialah "regangan", menyebabkan item fleksibel meregangkan secara automatik untuk mengisi ketinggian yang tersedia, dengan syarat ibu bapa tidak mempunyai set ketinggian yang jelas.

Contoh Kod

Pertimbangkan coretan kod berikut:

<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, anak kuning akan meregangkan untuk mengisi keseluruhan ketinggian ibu bapanya, manakala ketinggian ibu bapa akan melaraskan secara automatik berdasarkan kandungan teks anak biru.

Atas ialah kandungan terperinci Mengapakah \"ketinggian: 100%\" pada Flex Child Break Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn