Bagaimanakah Akaun Faktor `flex-mengecut` Flexbox untuk Padding dan `bersaiz kotak`?

Flex-kecut dengan Padding dan Border-box

Formula faktor pengecutan Flexbox menganggap padding dan saiz kotak seperti berikut:

Langkah 1: Kira Inner Flex Base Saiz

Tentukan saiz kotak kandungan (innerFlexBasis) berdasarkan sifat saiz kotak.

• Jika saiz kotak: kotak kandungan, innerFlexBasis = asas flex yang ditentukan.
• Jika bersaiz kotak: kotak sempadan, innerFlexBasis = asas flex yang ditentukan - (lapik-lapik kiri-kanan).

Langkah 2: Kira Faktor Pengecutan Flex Berskala

Darabkan asas lentur dalam dengan faktor pengecutan lentur untuk setiap yang tidak dibekukan item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

Langkah 3: Tentukan Nisbah Faktor Pengecutan Flex Berskala

Jumlah semua faktor yang tidak berskala item: sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

Cari nisbah setiap faktor pengecutan flex berskala kepada jumlah: nisbah = scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

Ubah suai lebar dalam setiap item secara berkadaran dengan nisbah dan baki ruang kosong:

InnerWidth = innerFlexBasis nisbah * remainingFreeSpace

Langkah 5: Laraskan Luar Lebar

Untuk saiz kotak: kotak sempadan, tambahkan padding pada lebar dalam untuk mengira lebar luar (dikira oleh getComputedStyle).

Atas ialah kandungan terperinci Bagaimanakah Akaun Faktor `flex-mengecut` Flexbox untuk Padding dan `bersaiz kotak`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!