Mengapa Peratusan Padding Mengganggu Reka Letak Flexbox?

Mengapa Peratusan Padding Memecahkan Gelagat Item Flex

Reka letak Flexbox direka bentuk untuk mengagihkan item secara sama rata di sepanjang paksi. Walau bagaimanapun, apabila menggunakan pelapik peratusan pada item lentur (elemen bukan lentur yang terkandung dalam bekas fleksibel), reka letak bekas boleh menjadi terganggu.

Dalam contoh ini, kami mempunyai bekas fleksibel (

) yang mengandungi beberapa item bukan lentur (
• ). Apabila pelapik peratusan digunakan pada individu
• elemen, bekas itu dibahagikan kepada berbilang baris:

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

  Salin selepas log masuk

  Walau bagaimanapun, apabila pelapik tetap digunakan (cth., pelapik: 0 30px), bekas itu kekal dalam satu baris.

  Penjelasan:

  Tingkah laku pelapik peratusan adalah disebabkan oleh proses pengiraan yang terlibat. Pelapik ditentukan secara relatif kepada lebar blok yang mengandungi. Lebar ini pada mulanya tidak diketahui dan mesti dikira berdasarkan kandungan atau sebarang nilai lebar tetap.

  Dalam kes peratusan pelapik, pengiraan lebar berlaku selepas pelapik digunakan. Oleh itu, lebar bekas dilaraskan dengan mengambil kira padding, yang membawa kepada pengiraan yang salah. Ini mengakibatkan pengedaran item tidak sekata dan pecah susun atur bekas fleksibel.

  Atas ialah kandungan terperinci Mengapa Peratusan Padding Mengganggu Reka Letak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!