Mengapa Item Fleksibel Saya Tidak Menghormati Margin Apabila Menggunakan `bersaiz kotak: kotak sempadan`?

Item Fleksibel Tidak Menghormati Jidar dan saiz Kotak: kotak sempadan

Memahami konsep saiz kotak dan cara ia mempengaruhi tingkah laku item flex adalah penting apabila menggunakan CSS Flexbox. Secara lalai, sifat bersaiz kotak ditetapkan kepada "kotak kandungan", yang bermaksud bahawa pelapik dan jidar ditambahkan pada lebar dan tinggi kandungan. Walau bagaimanapun, apabila saiz kotak ditetapkan kepada "kotak sempadan", jidar tidak difaktorkan ke dalam pengiraan lebar atau ketinggian.

Dalam kes ini, apabila item flex menghadapi masalah dengan jidar dan saiz kotak ditetapkan kepada "kotak sempadan," puncanya terletak pada mengabaikan margin semasa mengira lebar item. Tetapan awal bekas fleksibel ialah pengecutan fleksibel: 1, bermakna item fleksibel boleh mengecilkan saiznya agar muat dalam bekas. Walau bagaimanapun, ini dengan sendirinya tidak mencukupi untuk memastikan pematuhan pada lebar, ketinggian atau asas lentur yang ditentukan melainkan pengecutan lentur dilumpuhkan.

Penyelesaian

Untuk menyelesaikan isu dan pastikan item fleksibel menghormati jidar semasa menggunakan saiz kotak: kotak sempadan, pertimbangkan pelarasan berikut:

Ganti:

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

Dengan:

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

Dengan mengurangkan asas-flex daripada 33.33% kepada 26%, ia menjadi cukup kecil untuk memaksa balut sementara masih membenarkan margin difaktorkan. Pelarasan ini memastikan item flex tidak menceroboh ruang margin dan mematuhi lebar yang ditentukan dan jidar.

Atas ialah kandungan terperinci Mengapa Item Fleksibel Saya Tidak Menghormati Margin Apabila Menggunakan `bersaiz kotak: kotak sempadan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!