Pourquoi la marge droite du dernier élément s'effondre-t-elle dans les mises en page Flexbox et Grid ?

Surmonter l'effondrement des marges dans les mises en page Flexbox et en grille

Lors de l'organisation des éléments dans une liste horizontale à l'aide de mises en page flexbox ou en grille, vous pouvez rencontrer un problème où la marge droite du le dernier élément est réduit. Cela se produit en raison du comportement inhérent de ces mises en page.

Problème potentiel n°1 : mauvaise interprétation de la propriété Overflow

Au départ, il peut sembler que la propriété overflow provoque un effondrement de la marge. . Cependant, la propriété overflow s'applique uniquement à la zone de contenu, et non au remplissage ou aux marges. Par conséquent, cela ne peut pas être la cause première.

Problème potentiel n°2 : incohérences de comportement du navigateur

Dans certains cas, notamment en dehors des contextes de formatage flexbox ou grille, le dernier la marge semble être conservée. Cela suggère que le comportement du navigateur peut être incohérent et que le débordement peut s'étendre aux marges et aux remplissages dans certains contextes.

Solutions de contournement possibles :

• Utiliser une valeur négative Marges : Ajoutez une marge négative sur le côté droit du dernier élément pour l'éloigner du bord du conteneur. Cependant, cette approche peut ne pas fonctionner de manière cohérente sur tous les navigateurs.
• Insérer un élément d'espace réservé : Créez un élément vide (sans contenu visible) après le dernier élément pour absorber les marges réduites. Cela garantit qu'aucun élément visuellement actif n'est affecté par l'effondrement.
• Créez un nouveau conteneur d'emballage : Placez les éléments dans un nouveau conteneur enfant, puis ajoutez une marge sur le côté droit du parent. récipient. Cela isole l'effondrement de la marge dans le conteneur interne.

Exemple d'utilisation d'une marge négative :

li:last-child {
  margin-right: -30px;
}

Exemple d'utilisation d'un élément d'espace réservé :

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="placeholder"></li>
</ul>

Exemple d'utilisation d'un nouvel emballage Conteneur :

.container {
  margin-right: 30px;
}

.inner-container {
  display: flex;
  flex-direction: row;
}

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!