Wie berücksichtigt der „Flex-Shrink'-Faktor von Flexbox die Polsterung und die „Boxgröße'?

Flex-Schrumpf mit Polsterung und Randbox

Die Schrumpffaktorformel von Flexbox berücksichtigt Polsterung und Boxgröße wie folgt:

Schritt 1: Berechnen Sie die innere Flexbasis Größe

Bestimmen Sie die Größe der Inhaltsbox (innerFlexBasis) basierend auf der box-sizing-Eigenschaft.

• Wenn box-sizing: content-box, innerFlexBasis = angegebene Flex-Basis.
• Wenn Box-Sizing: border-box, innerFlexBasis = angegebene Flexbasis - (padding-left padding-right).

Schritt 2: Berechnen Sie den skalierten Flex-Schrumpffaktor

Multiplizieren Sie die innere Flex-Basis mit dem Flex-Schrumpffaktor für jedes ungefrorene Material item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

Schritt 3: Bestimmen Sie das Verhältnis der skalierten Flex-Schrumpffaktoren

Summieren Sie die skalierten Flex-Schrumpffaktoren aller nicht eingefrorenen Elemente: sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

Ermitteln Sie das Verhältnis jedes skalierten flexiblen Schrumpffaktors zur Summe: Verhältnis = scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

Schritt 4: Berechnen Sie die innere Breite des Artikels

Ändern Sie die Innenbreite jedes Elements proportional zum Verhältnis und verbleibender freier Speicherplatz:

innerWidth = innerFlexBasis Verhältnis * verbleibender freier Speicherplatz

Schritt 5: Äußere Breite anpassen

Für Box-Größe: border-box , fügen Sie Polsterung zur inneren Breite hinzu, um die äußere Breite zu berechnen (berechnet von getComputedStyle).

Das obige ist der detaillierte Inhalt vonWie berücksichtigt der „Flex-Shrink'-Faktor von Flexbox die Polsterung und die „Boxgröße'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!