Pourquoi Flex Wrap ne fonctionne-t-il pas avec le dimensionnement de la boîte : bordure et marges ?

Comprendre les marges des éléments Flexbox et le dimensionnement des boîtes

Contexte :

Flexbox est un module de mise en page puissant, permettant de contrôler le dimensionnement et répartition des éléments. La propriété box-sizing, quant à elle, détermine la manière dont le remplissage et les bordures affectent les dimensions de l'élément.

Dans votre scénario, vous vous attendiez à ce que les éléments flexibles se rétrécissent pour s'adapter à trois colonnes, même avec le dimensionnement de la boîte : border- boîte. Cependant, vous avez rencontré un problème où l'enveloppe flexible ne fonctionnait pas comme prévu.

Explication :

Il est crucial de noter que box-sizing : border-box inclut rembourrage et bordures dans le calcul largeur/hauteur, mais pas les marges. Les marges sont toujours calculées séparément.

Paramètres par défaut des conteneurs flexibles :

Un paramètre initial pour les conteneurs flexibles est flex-shrink : 1. Cela signifie que les éléments flexibles peuvent être réduits à s'insérer dans le conteneur, remplaçant potentiellement les largeurs, hauteurs ou valeurs de base flexibles spécifiées.

Solution :

Pour obtenir la disposition souhaitée, vous pouvez ajuster la flexibilité propriété de base à une valeur qui s'adapte aux marges tout en appliquant également un retour à la ligne. Cela permettra à flex-grow de répartir l'espace restant uniformément, sans empiéter sur l'espace de marge.

CSS ajusté :

<code class="css">* {
  box-sizing: border-box;
}

.horizontal-layout {
  display: flex;
  width: 400px;
}

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

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

Conclusion :

En comprenant l'interaction entre les marges des éléments flexbox et le dimensionnement des boîtes, vous pouvez contrôler efficacement la taille et le placement des éléments dans vos mises en page.

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!