Bagaimanakah `bersaiz kotak` Mempengaruhi Pengiraan Faktor Pengecutan Flexbox dengan Padding?

Flexbox Shrink Factor dengan Padding dan Border-Box

Flexbox melaraskan saiz item dalam bekas secara dinamik berdasarkan ruang yang tersedia. Sifat flex-shrink mengawal cara item mengecut apabila bekas terlalu kecil untuk menampung semua kandungannya.

Apabila padding digunakan pada item flex, lebar luar termasuk kedua-dua pelapik dan kandungan, manakala lebar dalam hanya merangkumi kandungan itu sendiri. Sifat bersaiz kotak menentukan lebar mana yang digunakan dalam pengiraan fleksibel.

Tanpa Padding

Formula untuk mengira faktor pengecutan flex berskala (saiz asas flex dalam didarab dengan flex faktor pengecutan) kekal sama:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

Dengan jumlah ruang bebas negatif sebanyak -200px, faktor pengecutan dan lebar dalam yang terhasil ialah:

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

Dengan Padding

Apabila padding ditambahkan, ruang yang tersedia untuk kandungan berkurangan , membawa kepada lebar dalaman yang berbeza.

Tanpa Border-box

Faktor pengecutan dikira berdasarkan saiz asas flex dalam, yang tidak termasuk pelapik. Lebar dalam yang terhasil ialah:

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

Dengan ruang kosong negatif -260px, faktor pengecutan dan lebar dalam menjadi:

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

Dengan Border-box

Apabila saiz kotak: kotak sempadan digunakan, saiz asas fleksibel termasuk kedua-dua kandungan dan padding. Faktor pengecutan dikira menggunakan saiz asas lentur luar, iaitu sifat lentur yang ditentukan didarab dengan ruang yang tersedia.

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

Dengan ruang bebas negatif -200px, faktor pengecutan dan lebar dalam ialah:

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

Atas ialah kandungan terperinci Bagaimanakah `bersaiz kotak` Mempengaruhi Pengiraan Faktor Pengecutan Flexbox dengan Padding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!