Pourquoi mes éléments Flex ne respectent-ils pas les marges lors de l'utilisation de « box-sizing : border-box » ?

Éléments flexibles ne respectant pas les marges et le dimensionnement de la boîte : border-box

Comprendre le concept de dimensionnement de la boîte et comment il affecte le comportement des éléments flexibles est crucial lorsque en utilisant CSS Flexbox. Par défaut, la propriété box-sizing est définie sur « content-box », ce qui signifie que le remplissage et les bordures sont ajoutés à la largeur et à la hauteur du contenu. Cependant, lorsque box-sizing est défini sur « border-box », les marges ne sont pas prises en compte dans les calculs de largeur ou de hauteur.

Dans ce cas, lorsque les éléments flexibles rencontrent des problèmes avec les marges et le box-sizing défini sur "border-box", la cause réside dans le non-respect des marges lors du calcul de la largeur des éléments. Le paramètre initial des conteneurs flexibles est flex-shrink : 1, ce qui signifie que les éléments flexibles peuvent réduire leur taille pour tenir dans le conteneur. Cependant, cela en soi est insuffisant pour garantir le respect des largeurs, hauteurs ou bases flexibles spécifiées, à moins que flex-shrink ne soit désactivé.

Solution

Pour résoudre le problème et assurez-vous que les éléments flexibles respectent les marges lors de l'utilisation de box-sizing : border-box, envisagez l'ajustement suivant :

Remplacer :

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

Par :

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

En réduisant la base flexible de 33,33 % à 26 %, elle devient suffisamment petite pour forcer un enroulement tout en permettant de prendre en compte la marge. Cet ajustement garantit que les éléments flexibles n'empiètent pas sur l'espace de marge et respectent les largeurs spécifiées. et marges.

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!