Comment le remplissage affecte-t-il le comportement Flex-Shrink dans « border-box » par rapport à « content-box » ?

Facteur de rétrécissement flexible dans Padding et Border-Box

Le facteur de rétrécissement flexible est utilisé pour déterminer le degré de rétrécissement d'un élément lorsqu'il il y a un espace négatif dans le conteneur flexible. Lorsque le remplissage est appliqué à un élément, la base de flexion interne est affectée, en fonction de la valeur de box-sizing.

• Content-box : La base de flexion interne comprend uniquement le contenu, donc le remplissage n'affecte pas l'espace disponible pour le retrait.
• Border-box : La base de flexion interne comprend à la fois le contenu et le rembourrage, de sorte que le rembourrage réduit l'espace disponible pour le rétrécissement.

Pour calculer le facteur de rétrécissement flexible mis à l'échelle pour chaque article, multipliez sa base de flexibilité interne par son facteur de rétrécissement flexible. Ensuite, trouvez le rapport entre le facteur de rétrécissement flexible mis à l'échelle de chaque élément et la somme de tous les facteurs de rétrécissement flexible mis à l'échelle. Enfin, définissez la taille cible de l'élément sur sa base flexible moins une fraction de l'espace négatif proportionnelle au rapport.

Sans remplissage, le calcul est simple :

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

Avec rembourrage, l'espace disponible est réduit, donc l'espace libre restant change.

Dans le cas de border-box, les bases flexibles spécifiées sont les bases extérieures (y compris le rembourrage). Les bases intérieures sont calculées en soustrayant les largeurs de remplissage. La somme des facteurs de rétrécissement flexible mis à l'échelle reste inchangée, mais le rapport et la taille cible sont ajustés :

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

Exemple :

Considérons un conteneur flexible avec trois éléments , chacun avec un facteur de flex-rétrécissement de 2 :

• Élément 1 : Base flexible = 300 px, padding = 0px
• Élément 2 : base flexible = 200px, rembourrage = 0px
• Élément 3 : base flexible = 100px, rembourrage = 0px

Scénario 1 (Non Rembourrage) :

• Espace libre restant = -200px
• Facteurs de rétrécissement par flexion mis à l'échelle : 600, 200, 200
• Somme des facteurs de rétrécissement par flexion mis à l'échelle = 1000
• Rapports : 0,6, 0,2, 0,2
• Largeurs intérieures : 180px, 160px, 60px

Scénario 2 (Remplissage = 10px) :

• Restant espace libre = -260px
• Facteurs de rétrécissement flexible mis à l'échelle : 560, 200, 160
• Somme des facteurs de rétrécissement flexible mis à l'échelle = 920
• Ratios : 0,61, 0,22, 0,17
• Largeurs intérieures : 144px, 148px, 48px

Scénario 3 (Border-Box) :

• Espace libre restant = -200px
• Rétrécissement flexible à l'échelle facteurs : 636, 240, 176
• Somme des facteurs de rétrécissement de flexion mis à l'échelle = 1052
• Ratios : 0,6, 0,23, 0,17
• Largeurs intérieures : 176px, 160px, 64px

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!