Comment le facteur Flex-Shrink interagit-il avec le remplissage dans le dimensionnement de la bordure ?

Comment le facteur de rétrécissement flexible est-il utilisé dans le rembourrage et la bordure ?

Le calcul de Flexbox pour le facteur de rétrécissement, comme indiqué dans la spécification, nécessite de multiplier le facteur de rétrécissement de chacun article par sa taille de base flexible, ce qui entraîne un facteur de rétrécissement mis à l'échelle. Ces facteurs mis à l'échelle sont ensuite utilisés pour déterminer la proportion d'espace libre négatif qui doit être appliquée à chaque élément.

Content-Box vs Border-Box

Lorsque le remplissage est introduit, la taille de la base flexible dépend de la valeur du dimensionnement de la boîte. Dans le cas d'une content-box, le rembourrage est ajouté à la largeur extérieure, préservant la taille intérieure utilisée comme taille de base flexible. En conséquence, le calcul du retrait reste le même que celui du scénario sans rembourrage.

Cependant, lorsque box-sizing est défini sur border-box, les tailles de base flexible spécifiées deviennent les largeurs extérieures, y compris le rembourrage. Les tailles de base flexible intérieure sont calculées en soustrayant les largeurs de bordure et de rembourrage. Ce changement dans la taille de la base flexible interne affecte le calcul des facteurs de retrait mis à l'échelle et, en fin de compte, le comportement de retrait des éléments flexibles.

Calcul du retrait avec Border-Box

Considérez un situation avec rembourrage et dimensionnement de la boîte définis sur border-box :

• Tailles de la base flexible extérieure : [360px, 220px, 120px]
• Tailles de base flexibles intérieures : [320px, 200px, 100px]
• Rembourrage : 20px de chaque côté
• Espace libre négatif : -200px

Calcul du retrait échelonné facteurs :

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

Enfin, appliquer les facteurs de retrait mis à l'échelle à l'espace libre négatif :

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

Tailles intérieures et extérieures ajustées

Ajustement des tailles calculées à tenir compte de la base flexible externe tailles :

• item1 : Intérieur : 320px - 128px = 192px ; Extérieur : 192px 2*20px = 232px
• élément2 : Intérieur : 200px - 48px = 152px ; Extérieur : 152px 2*20px = 192px
• item3 : Intérieur : 100px - 24px = 76px ; Extérieur : 76px 2*20px = 116px

Cela montre comment le retrait est réparti en fonction du facteur de rétrécissement flexible et de la prise en compte du dimensionnement de la bordure. Le remplissage est rajouté à la largeur extérieure, ce qui entraîne des tailles calculées différentes par rapport au scénario de la zone de contenu.

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!