Comment le « dimensionnement de la boîte » affecte-t-il les calculs du facteur de rétrécissement Flexbox avec remplissage ?

Flexbox Shrink Factor avec rembourrage et Border-Box

Flexbox ajuste dynamiquement la taille des éléments dans un conteneur en fonction de l'espace disponible. La propriété flex-shrink contrôle la façon dont un élément se rétrécit lorsque le conteneur est trop petit pour accueillir tout son contenu.

Lorsque le remplissage est appliqué aux éléments flexibles, la largeur extérieure inclut à la fois le remplissage et le contenu, tandis que la largeur intérieure n'englobe que le contenu lui-même. La propriété box-sizing détermine quelle largeur est utilisée dans les calculs de flexion.

Sans rembourrage

La formule de calcul des facteurs de rétrécissement de flexion mis à l'échelle (taille de la base de flexion interne multipliée par flex facteur de rétrécissement) reste le même :

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

TOTAL = 1000

Avec un espace libre négatif total de -200px, les facteurs de rétrécissement et les résultats les largeurs intérieures sont :

: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)

Avec rembourrage

Lorsque un rembourrage est ajouté, l'espace disponible pour le contenu diminue, conduisant à différentes largeurs intérieures.

Sans Border-box

Les facteurs de retrait sont calculés en fonction de la taille de la base flexible intérieure, qui n'inclut pas le rembourrage. Les largeurs intérieures résultantes sont :

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

TOTAL = 900

Avec un espace libre négatif de -260px, les facteurs de rétrécissement et les largeurs intérieures deviennent :

: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)

Avec Border-box

Lorsque box-sizing: border-box est appliqué, la taille de la base flexible inclut à la fois le contenu et le remplissage. Les facteurs de rétrécissement sont calculés en utilisant la taille de la base flexible externe, qui est la propriété de flexion spécifiée multipliée par l'espace disponible.

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

TOTAL = 1100

Avec un espace libre négatif de -200 px, les facteurs de rétrécissement et les largeurs intérieures sont :

: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)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!