Comment « flex-shrink » interagit-il avec Padding et « box-sizing : border-box » ?

Comment flex-shrink prend-il en compte le padding et la border-box ?

La propriété flex-shrink de Flexbox détermine la façon dont la taille d'un élément est réduite lorsque l'espace libre doit être distribué parmi les éléments flexibles. Cependant, son comportement peut varier en fonction de la présence de padding et de la valeur du box-sizing.

Flex-shrink sans padding

En l'absence de padding, le calcul du flex-shrink est simple . L'espace libre négatif est réparti entre les éléments flexibles en fonction de leurs valeurs de flex-shrink et de leurs tailles initiales.

Flex-shrink avec rembourrage

Lorsque un rembourrage est ajouté aux éléments flexibles, le calcul devient plus complexe . L'espace disponible pour les éléments flexibles est réduit de la quantité totale de rembourrage. Cet espace réduit est ensuite réparti entre les éléments en fonction de leurs facteurs de flex-rétrécissement mis à l'échelle.

Dimensionnement de la boîte et rembourrage

La propriété de dimensionnement de la boîte affecte la façon dont la taille d'un élément est calculée, y compris la utilisation de rembourrage. Lorsque box-sizing est défini sur border-box, la largeur et la hauteur spécifiées incluent le remplissage. Par conséquent, la taille initiale d'un élément flexible avec padding sera plus grande que sans padding.

Calcul de flex-shrink ajusté avec padding et border-box

Lorsque padding et box-sizing : border -box sont présents, le calcul pour flex-shrink est ajusté pour tenir compte de ces facteurs. Les étapes impliquées sont les suivantes :

1. Calculez les facteurs de flexion-rétrécissement mis à l'échelle pour les articles flexibles non gelés. Cela implique de multiplier la valeur de rétrécissement flexible par la taille de la base flexible interne, qui est la taille spécifiée moins les largeurs de rembourrage et de bordure.
2. Trouvez la somme des facteurs de rétrécissement flexible mis à l'échelle pour tous les éléments flexibles non gelés.
3. 🎜>
Pour chaque élément flexible non gelé, déterminez son rapport en divisant son facteur de réduction de flexibilité mis à l'échelle par la somme de tous les éléments mis à l'échelle facteurs de rétrécissement flexible.
4. Définissez la taille principale cible de chaque élément sur sa taille de base flexible moins une fraction de l'espace libre négatif proportionnelle à son rapport. Cette fraction est calculée comme le rapport multiplié par l'espace libre négatif.
5. Ajustez la taille calculée de chaque élément flexible en fonction de ses tailles de base flexibles intérieure et extérieure et du rembourrage, ce qui donne la largeur finale de l'élément avec padding.

Conclusion

Comprendre comment flex-shrink interagit avec le padding et le box-sizing est essentiel pour contrôler le disposition des conteneurs flexibles. En tenant compte de ces facteurs, les développeurs peuvent réaliser des mises en page précises et flexibles qui répondent à leurs exigences de conception.

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!