Mengapa Peratusan Padding pada Kanak-kanak Barangan Flex Memecahkan Bekas Flex Induk?

Mengapa Peratusan Padding Memecahkan Item Flex

Pertimbangkan senario di mana

elemen digayakan sebagai item fleksibel. Di dalam
ialah beberapa
• elemen yang bukan item fleksibel. Apabila peratusan pelapik digunakan pada
• elemen,
  elemen pecah kepada beberapa baris. Walau bagaimanapun, apabila pelapik tetap (cth., 30px) digunakan,
  kekal pada satu baris.

  Untuk memahami tingkah laku ini, kami menyelidiki pengiraan yang terlibat dengan pelapik peratusan. Peratusan nilai padding adalah relatif kepada lebar blok yang mengandungi. Walau bagaimanapun, lebar blok yang mengandungi ditentukan oleh kandungannya.

  Dalam kes ini, lebar

  dikira berdasarkan kandungan
  • elemen. Untuk mendapatkan lebar ini, kami menggunakan kod berikut:

    console.log(document.querySelector('ul').offsetWidth);

    Salin selepas log masuk

    Kerumitannya terletak pada fakta bahawa kami tidak dapat menentukan peratusan nilai padding sebelum mengira lebar. Oleh itu, kami mula-mula mengira lebar berdasarkan kandungan.

    Oleh itu, apabila peratusan pelapik digunakan, penyemak imbas bergelut untuk menentukan lebar blok yang mengandungi, mengakibatkan tingkah laku berbilang baris. Sebaliknya, dengan pelapik tetap, lebar ditakrifkan secara eksplisit, menghapuskan isu ini.

    Atas ialah kandungan terperinci Mengapa Peratusan Padding pada Kanak-kanak Barangan Flex Memecahkan Bekas Flex Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!