Maison > Article > interface Web > 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 :
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 :
Propriétés Flexbox
Dans flexbox, les propriétés suivantes concernent la disposition des éléments flexibles :
Solution
Pour garantir que les éléments flexibles respectent les marges tout en box-sizing : border-box est utilisé, tenez compte des points suivants :
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!