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:
bersaiz kotak
Sifat bersaiz kotak menentukan cara pelapik dan sempadan dikira ke dalam saiz keseluruhan elemen. Ia mempunyai dua nilai yang mungkin:
Sifat Flexbox
Dalam flexbox, sifat berikut berkaitan dengan susun atur item flex:
Penyelesaian
Untuk memastikan item flex menghormati margin sambil saiz kotak: kotak sempadan digunakan, pertimbangkan perkara berikut:
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!