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

Éléments flexibles ignorant les marges avec le dimensionnement de la boîte : border-box

Flexbox peut être délicat en ce qui concerne les marges et le dimensionnement de la boîte. Par défaut, les marges ne sont pas incluses dans le calcul de la taille de l'élément flexible, même lors de l'utilisation de box-sizing : border-box.

Comprendre le modèle de boîte

Le Le modèle de boîte est un concept CSS qui définit les dimensions et la disposition des éléments. Il se compose de quatre sections :

• Boîte de contenu : la taille du contenu réel de l'élément.
• Padding : espace transparent à l'intérieur de la bordure.
• Bordure : Ligne visible autour de l'élément.
• Marge : Espace transparent à l'extérieur de la bordure.

box-sizing

La propriété box-sizing détermine comment le remplissage et les bordures sont calculés dans la taille globale d'un élément. Il a deux valeurs possibles :

• content-box (par défaut) : le remplissage et les bordures sont ajoutés à la zone de contenu.
• border-box : le remplissage et les bordures sont inclus dans le contenu de l'élément. size.

Propriétés Flexbox

Dans flexbox, les propriétés suivantes concernent la disposition des éléments flexibles :

• flex- grow : Spécifie la quantité d'espace supplémentaire qu'un élément doit occuper lorsqu'il y a de l'espace libre.
• flex-shrink : Spécifie la quantité qu'un élément doit rétrécir pour tenir dans le conteneur.
• flex-basis : Définit une taille idéale d'un élément avant d'appliquer flex-grow ou flex-shrink.

Solution

Pour garantir que les éléments flexibles respectent les marges tout en box-sizing : border-box est utilisé, tenez compte des points suivants :

• Spécifiez flex-shrink : 0 sur les éléments flexibles pour les empêcher de rétrécir.
• Ajustez la valeur flex-basis pour tenir compte à la fois de la taille du contenu et des marges.

Par exemple, dans votre code :

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}

En ajustant la base flexible, nous nous assurons qu'il y a suffisamment d'espace pour les deux le contenu et les 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!