Wie wirkt sich Padding auf das Flex-Shrink-Verhalten in „Border-Box' vs. „Content-Box' aus?

Flex-Schrumpffaktor in Padding und Border-Box

Der Flex-Schrumpffaktor wird verwendet, um zu bestimmen, wie stark ein Element wann schrumpft Im Flex-Container ist negativer Platz vorhanden. Wenn Polsterung auf ein Element angewendet wird, wird die innere Flexbasis beeinflusst, abhängig vom Wert der Boxgröße.

• Content-box: Die innere Flexbasis umfasst nur die Inhalt, daher hat die Polsterung keinen Einfluss auf den verfügbaren Raum zum Schrumpfen.
• Grenzkasten: Die innere Flexbasis umfasst sowohl Inhalt als auch Polsterung, daher verringert die Polsterung den verfügbaren Raum zum Schrumpfen.

Um den skalierten Flex-Schrumpffaktor für jeden Artikel zu berechnen, multiplizieren Sie seine innere Flex-Basis mit seinem Flex-Schrumpffaktor. Ermitteln Sie dann das Verhältnis des skalierten Flex-Schrumpffaktors jedes Artikels zur Summe aller skalierten Flex-Schrumpffaktoren. Stellen Sie abschließend die Zielgröße des Elements auf seine Flex-Basis abzüglich eines Bruchteils des negativen Leerraums proportional zum Verhältnis ein.

Ohne Polsterung ist die Berechnung unkompliziert:

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

Mit Polsterung der verfügbare Platz wird reduziert, der verbleibende freie Platz verändert sich also.

Bei Border-Box handelt es sich bei den angegebenen Flex-Basen um die äußeren Bases (inkl. Polsterung). Die inneren Basen werden durch Subtrahieren der Polsterbreiten berechnet. Die Summe der skalierten Flex-Schrumpffaktoren bleibt unverändert, Verhältnis und Zielgröße werden jedoch angepasst:

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

Beispiel:

Betrachten Sie einen Flex-Container mit drei Artikeln , jeweils mit einem Flex-Schrumpffaktor von 2:

• Punkt 1: Flexbasis = 300px, Polsterung = 0px
• Element 2: Flexbasis = 200px, Polsterung = 0px
• Element 3: Flexbasis = 100px, Polsterung = 0px

Szenario 1 ( Keine Polsterung):

• Verbleibend freier Speicherplatz = -200px
• Skalierte flexible Schrumpffaktoren: 600, 200, 200
• Summe der skalierten flexiblen Schrumpffaktoren = 1000
• Verhältnisse: 0,6, 0,2, 0,2
• Innenbreiten: 180px, 160 Pixel, 60 Pixel Faktoren: 560, 200, 160

Verhältnisse: 0,61, 0,22, 0,17

• Szenario 3 (Grenzfeld):
• Verbleibender freier Speicherplatz = -200px
• Skalierte Flex-Schrumpfungsfaktoren: 636, 240, 176

Verhältnisse: 0,6, 0,23, 0,17

Das obige ist der detaillierte Inhalt vonWie wirkt sich Padding auf das Flex-Shrink-Verhalten in „Border-Box' vs. „Content-Box' aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!