Wie wirkt sich die „Boxgröße' auf die Berechnung des Flexbox-Schrumpffaktors mit Polsterung aus?

Flexbox-Schrumpffaktor mit Polsterung und Randbox

Flexbox passt die Größe von Elementen in einem Container basierend auf dem verfügbaren Platz dynamisch an. Die Flex-Shrink-Eigenschaft steuert, wie ein Element schrumpft, wenn der Behälter zu klein ist, um seinen gesamten Inhalt aufzunehmen.

Wenn Polsterung auf Flex-Elemente angewendet wird, umfasst die äußere Breite sowohl die Polsterung als auch den Inhalt, während die innere Breite umfasst nur den Inhalt selbst. Die Boxgrößeneigenschaft bestimmt, welche Breite bei Flex-Berechnungen verwendet wird.

Ohne Polsterung

Die Formel zur Berechnung skalierter Flex-Schrumpffaktoren (innere Flex-Basisgröße multipliziert mit Flex Schrumpffaktor) bleibt gleich:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

Bei einem gesamten negativen Freiraum von -200px bleiben die Schrumpffaktoren und daraus resultierenden Innenbreiten gleich sind:

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

Mit Polsterung

Wenn Polsterung hinzugefügt wird, verringert sich der verfügbare Platz für Inhalte, was zu unterschiedlichen Innenbreiten führt.

Ohne Randbox

Die Schrumpffaktoren werden basierend auf der inneren Flex-Basisgröße berechnet, die nicht berücksichtigt wird Polsterung. Die resultierenden Innenbreiten sind:

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

Bei einem negativen freien Raum von -260 Pixel betragen die Schrumpffaktoren und Innenbreiten:

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

Mit Border-Box

Wenn box-sizing: border-box angewendet wird, umfasst die flexible Basisgröße sowohl Inhalt als auch Polsterung. Die Schrumpfungsfaktoren werden anhand der äußeren Flex-Basisgröße berechnet, bei der es sich um die angegebene Flex-Eigenschaft multipliziert mit dem verfügbaren Platz handelt.

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

Bei einem negativen freien Raum von -200 Pixel betragen die Schrumpfungsfaktoren und Innenbreiten:

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

Das obige ist der detaillierte Inhalt vonWie wirkt sich die „Boxgröße' auf die Berechnung des Flexbox-Schrumpffaktors mit Polsterung aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!