Mengapa Item Flex Saya Mengabaikan Margin Apabila Menggunakan `bersaiz kotak: kotak sempadan`?

Item Fleksibel Mengabaikan Jidar dengan saiz kotak: kotak sempadan

Flexbox boleh menjadi rumit apabila ia berkaitan dengan jidar dan saiz kotak. Secara lalai, jidar tidak termasuk dalam pengiraan saiz item fleksibel, walaupun semasa menggunakan saiz kotak: kotak sempadan.

Memahami Model Kotak

The model kotak ialah konsep CSS yang mentakrifkan dimensi dan susun atur elemen. Ia terdiri daripada empat bahagian:

• Kotak kandungan: Saiz kandungan sebenar elemen.
• Padding: Ruang lutsinar di dalam sempadan.
• Sempadan: Garisan yang boleh dilihat di sekeliling elemen.
• Margin: Ruang lutsinar di luar sempadan.

bersaiz kotak

Sifat bersaiz kotak menentukan cara pelapik dan sempadan dikira ke dalam saiz keseluruhan elemen. Ia mempunyai dua nilai yang mungkin:

• kotak kandungan (lalai): Pelapik dan sempadan ditambahkan pada kotak kandungan.
• kotak sempadan: Pelapik dan sempadan disertakan dalam elemen saiz.

Sifat Flexbox

Dalam flexbox, sifat berikut berkaitan dengan susun atur item flex:

• flex- tumbuh: Menentukan jumlah ruang tambahan yang perlu diambil oleh item apabila terdapat ruang kosong.
• flex-shrink: Menentukan jumlah item harus mengecut untuk dimuatkan dalam bekas.
• flex-basis: Mentakrifkan saiz ideal item sebelum menggunakan flex-grow atau flex-shrink.

Penyelesaian

Untuk memastikan item flex menghormati margin sambil saiz kotak: kotak sempadan digunakan, pertimbangkan perkara berikut:

• Nyatakan pengecutan fleksibel: 0 pada item fleksibel untuk mengelakkannya daripada mengecut.
• Laraskan nilai asas-flex untuk mengambil kira kedua-dua saiz kandungan dan margin.

Sebagai contoh, dalam kod anda:

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}

Dengan melaraskan asas-flex, kami memastikan terdapat ruang yang mencukupi untuk kedua-duanya kandungan dan margin.

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