Mengapa Barangan Flex Membungkus Apabila Menggunakan Padding Peratusan?

Mengapa Item Flex Berpecah Apabila Peratusan Padding Digunakan?

Pertimbangkan senario di mana

elemen, item fleksibel, merangkumi beberapa bukan fleksibel
• elemen. Apabila pelapik peratusan digunakan pada
• elemen,
  bekas berpecah merentasi berbilang baris. Walau bagaimanapun, ini tidak berlaku apabila padding tetap digunakan.

  Penjelasan

  Apabila peratusan padding digunakan, ia adalah relatif kepada lebar blok yang mengandungi, dalam kes ini, < ul>. Masalah timbul daripada fakta bahawa peratusan pelapik tidak dapat diselesaikan sebelum lebar bekas ditentukan.

  Tanpa pelapik tetap, penyemak imbas mengira lebar

  berdasarkan kandungannya. Pelapik peratusan kemudiannya digunakan, menghasilkan bekas yang lebih luas yang tidak lagi sesuai dengan semua
  • elemen pada satu baris.

    Beispiel

    Untuk menggambarkan tingkah laku ini dengan lebih baik, pertimbangkan kod berikut:

    li {
      display: inline-block;
      padding: 0 5%; /* Percentage padding */
      border: 1px solid black;
    }
    
    header {
      display: flex;
    }
    
    ul {
      border:1px solid red;
    }

    Jika kami melaksanakan JavaScript berikut dalam konsol, kami boleh melihat lebar

    selepas padding telah digunakan:

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

    Ini akan mengeluarkan lebar

    selepas peratusan padding telah digunakan.

    Atas ialah kandungan terperinci Mengapa Barangan Flex Membungkus Apabila Menggunakan Padding Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!