Wie wirkt sich der Flex-Shrink-Faktor auf die Polsterung bei der Border-Box-Größe aus?

Wie wirkt sich der Flex-Schrumpffaktor auf Polsterung und Randbox aus?

Die Flexbox-Berechnung für den Schrumpffaktor, wie in der Spezifikation beschrieben, erfordert die Multiplikation des jeweiligen Schrumpffaktors Artikel anhand seiner flexiblen Basisgröße, was zu einem skalierten Schrumpffaktor führt. Diese skalierten Faktoren werden dann verwendet, um den Anteil des negativen freien Speicherplatzes zu bestimmen, der auf jedes Element angewendet werden sollte.

Content-Box vs. Border-Box

Beim Auffüllen eingeführt, hängt die Größe der flexiblen Basis vom Wert der Boxgröße ab. Im Fall von Content-Box wird die Polsterung zur Außenbreite hinzugefügt, wobei die Innengröße erhalten bleibt, die als Flex-Basisgröße verwendet wird. Dadurch bleibt die Schrumpfungsberechnung dieselbe wie im Szenario ohne Polsterung.

Wenn jedoch die Box-Größe auf „Border-Box“ eingestellt ist, werden die angegebenen Flex-Base-Größen zu den Außenbreiten, einschließlich der Polsterung. Die inneren Flex-Basisgrößen werden durch Subtrahieren der Rand- und Polsterbreiten berechnet. Diese Änderung der inneren Flex-Basisgröße wirkt sich auf die Berechnung der skalierten Schrumpffaktoren und letztendlich auf das Schrumpfverhalten von Flex-Artikeln aus.

Schrumpfungsberechnung mit Border-Box

Bedenken Sie a Situation mit Polsterung und Boxgröße auf „border-box“ eingestellt:

• Äußere flexible Basisgrößen: [360px, 220px, 120px]
• Größen der inneren flexiblen Basis: [320px, 200px, 100px]
• Polsterung: 20px auf jeder Seite
• Negativer Freiraum: -200px

Berechnung des skalierten Schrumpfs Faktoren:

• item1: (320px 2) / [(320px 2) (200px 1) (100px 2)] = 0,64
• item2: (200px 1) / [(320px 2) (200px 1) (100px 2)] = 0,24
• item3: (100px 2) / [(320px 2) ( 200px 1) (100px 2)] = 0,12

Zuletzt werden die skalierten Schrumpfungsfaktoren auf den negativen freien Raum angewendet:

• item1: 0,64 * (-200px) = -128px
• item2: 0,24 * (-200px) = -48px
• item3: 0,12 * (-200px) = -24px

Angepasste Innen- und Außengrößen

Anpassen der berechneten Größen an Berücksichtigen Sie die äußere Flexbasis Größen:

• item1: Innen: 320px - 128px = 192px; Außen: 192px 2*20px = 232px
• item2: Innen: 200px - 48px = 152px; Außen: 152px 2*20px = 192px
• item3: Innen: 100px - 24px = 76px; Außen: 76px 2*20px = 116px

Dies zeigt, wie die Schrumpfung basierend auf dem Flex-Schrumpffaktor und der Berücksichtigung der Rahmengröße verteilt wird. Die Polsterung wird wieder zur äußeren Breite hinzugefügt, was zu unterschiedlichen berechneten Größen im Vergleich zum Inhaltsbox-Szenario führt.

Das obige ist der detaillierte Inhalt vonWie wirkt sich der Flex-Shrink-Faktor auf die Polsterung bei der Border-Box-Größe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!