Bagaimanakah Padding Mempengaruhi Gelagat Flex-Shrink dalam `border-box` berbanding `content-box`?

Faktor Pengecutan Lentur dalam Padding dan Kotak Sempadan

Faktor pengecutan lentur digunakan untuk menentukan berapa banyak elemen akan mengecut apabila terdapat ruang negatif dalam bekas fleksibel. Apabila padding digunakan pada elemen, asas lentur dalam dipengaruhi, bergantung pada nilai saiz kotak.

• Kotak kandungan: Asas lentur dalam merangkumi hanya kandungan, jadi pelapik tidak menjejaskan ruang yang tersedia untuk pengecutan.
• Kotak sempadan: Bahagian dalam asas lentur merangkumi kedua-dua kandungan dan pelapik, jadi pelapik mengurangkan ruang yang tersedia untuk pengecutan.

Untuk mengira faktor pengecutan lentur berskala bagi setiap item, darabkan asas lentur dalamannya dengan faktor pengecutan lenturnya. Kemudian, cari nisbah faktor pengecutan fleksibel berskala setiap item kepada jumlah semua faktor pengecutan fleksibel berskala. Akhir sekali, tetapkan saiz sasaran item kepada asas fleksibelnya tolak sebahagian kecil daripada ruang negatif yang berkadar dengan nisbah.

Tanpa pelapik, pengiraan adalah mudah:

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

Dengan pelapik, ruang yang ada dikurangkan, jadi ruang kosong yang tinggal berubah.

Dalam kes kotak sempadan, flex yang ditentukan tapak adalah tapak luar (termasuk pelapik). Tapak dalam dikira dengan menolak lebar padding. Jumlah faktor pengecutan fleksibel berskala kekal tidak berubah, tetapi nisbah dan saiz sasaran dilaraskan:

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

Contoh:

Pertimbangkan bekas fleksibel dengan tiga item , setiap satu dengan faktor pengecutan lentur sebanyak 2:

• Item 1: Asas fleksibel = 300px, padding = 0px
• Item 2: Asas fleksibel = 200px, padding = 0px
• Item 3: Asas fleksibel = 100px, padding = 0px

Senario 1 (No Padding):

• Baki ruang kosong = -200px
• Faktor pengecutan flex berskala: 600, 200, 200
• Jumlah faktor pengecutan flex berskala = 1000
• Nisbah: 0.6, 0.2, 0.2
• Lebar dalam: 180px, 160px, 60px

Senario 2 (Padding = 10px):

• Baki ruang kosong = -260px
• Faktor pengecutan lentur berskala: 560, 200, 160
• Jumlah faktor pengecutan lentur berskala = 920
• Nisbah: 0.61, 0.17
Batin lebar: 144px, 148px, 48px

Senario 3 (Kotak Sempadan):

• Baki ruang kosong = -200px
• Faktor pengecutan fleksibel berskala: 636, 240, 176
• Jumlah faktor pengecutan lentur berskala = 1052
• Nisbah: 0.6, 0.23, 0.17
• Lebar dalam: 176px, 160px🎜>.

Atas ialah kandungan terperinci Bagaimanakah Padding Mempengaruhi Gelagat Flex-Shrink dalam `border-box` berbanding `content-box`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!