Bagaimanakah Faktor Pengecutan Flex Berinteraksi dengan Padding dalam Saiz Kotak Sempadan?

Bagaimanakah faktor pengecutan lentur dalam padding dan kotak sempadan?

Pengiraan Flexbox untuk faktor pengecutan, seperti yang digariskan dalam spesifikasi, memerlukan mendarabkan faktor pengecutan setiap item mengikut saiz asas lenturnya, menghasilkan faktor pengecutan berskala. Faktor berskala ini kemudiannya digunakan untuk menentukan perkadaran ruang kosong negatif yang perlu digunakan pada setiap item.

Kotak Kandungan vs Kotak Sempadan

Apabila padding diperkenalkan, saiz asas flex bergantung pada nilai saiz kotak. Dalam kes kotak kandungan, padding ditambah pada lebar luar, mengekalkan saiz dalam yang digunakan sebagai saiz asas fleksibel. Akibatnya, pengiraan pengecutan kekal sama seperti senario tanpa pelapik.

Walau bagaimanapun, apabila saiz kotak ditetapkan kepada kotak sempadan, saiz asas lentur yang ditentukan menjadi lebar luar, termasuk pelapik. Saiz asas lentur dalam dikira dengan menolak lebar sempadan dan padding. Perubahan dalam saiz asas lentur dalam mempengaruhi pengiraan faktor pengecutan berskala dan akhirnya kelakuan pengecutan item fleksibel.

Pengiraan Pengecutan dengan Kotak Sempadan

Pertimbangkan situasi dengan padding dan set saiz kotak ke kotak sempadan:

• Saiz asas fleksibel luar: [360px, 220px, 120px]
• Saiz asas fleksibel dalam: [320px, 200px, 100px]
• Padding : 20px pada setiap sisi
• Negatif ruang kosong: -200px

Mengira faktor pengecutan berskala:

• item1: (320px 2) / [(320px 2) (200px 1) (100px 2)] = 0.64
• item2: (200px 1) / [(320px 2) (200px 1) (100px 2)] = 0.24
• item (100px 2) / [(320px 2) (200px 1) (100px 2)] = 0.12

Akhir sekali, gunakan faktor pengecutan berskala pada ruang bebas negatif:

• item1: 0.64 * (-200px) = -128px
• item2: 0.24 * (-200px) = -48px
• item3: 0.12 * (-200px) = -24px

Dalaman dan Luaran Dilaraskan Saiz

Melaraskan saiz yang dikira untuk mengambil kira saiz asas lentur luar:

• item1: Dalaman: 320px - 128px = 192px; Luar: 192px 2*20px = 232px
• item2: Dalaman: 200px - 48px = 152px; Luar: 152px 2*20px = 192px
• item3: Dalaman: 100px - 24px = 76px; Luar: 76px 2*20px = 116px

Ini menunjukkan cara pengecutan diagihkan berdasarkan faktor pengecutan fleksibel dan pertimbangan saiz kotak sempadan. Pelapik ditambah semula pada lebar luar, menghasilkan saiz pengiraan yang berbeza berbanding senario kotak kandungan.

Atas ialah kandungan terperinci Bagaimanakah Faktor Pengecutan Flex Berinteraksi dengan Padding dalam Saiz Kotak Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!