Comment le facteur « flex-shrink » de Flexbox tient-il compte du remplissage et du « dimensionnement de la boîte » ?

Flex-shrink avec rembourrage et bordure-box

La formule du facteur de rétrécissement de Flexbox prend en compte le rembourrage et la taille de la boîte comme suit :

Étape 1 : Calculer la base flexible intérieure Taille

Déterminez la taille de la zone de contenu (innerFlexBasis) en fonction de la propriété box-sizing.

• Si box-sizing : content-box, innerFlexBasis = base de flexibilité spécifiée.
• Si box-sizing : border-box, innerFlexBasis = base de flexion spécifiée - (padding-left padding-right).

Étape 2 : Calculer le facteur de rétrécissement flexible à l'échelle

Multipliez la base de flexion intérieure par le facteur de rétrécissement de la flexion pour chaque dégelé. item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

Étape 3 : Déterminer le rapport des facteurs de rétrécissement flexible mis à l'échelle

Sommez les facteurs de rétrécissement flexible mis à l'échelle de tous les éléments non gelés éléments : sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

Trouvez le rapport de chaque facteur de rétrécissement flexible mis à l'échelle à la somme : ratio = scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

Étape 4 : Calculer la largeur intérieure de l'article

Modifiez la largeur intérieure de chaque élément proportionnellement au rapport et au reste espace libre :

innerWidth = innerFlexBasis ratio * restantFreeSpace

Étape 5 : Ajuster la largeur extérieure

Pour le dimensionnement de la boîte : bordure-boîte, ajoutez un remplissage à la largeur intérieure pour calculer la largeur extérieure (calculée par getComputedStyle).

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!