Comment éliminer la marge inférieure indésirable sur les articles flexibles emballés ?

Comment supprimer la marge des éléments flexibles après l'emballage

Dans flexbox, vous pouvez rencontrer une situation dans laquelle le dernier élément d'une ligne enveloppée conserve une marge inférieure, provoquant un écart indésirable. Lorsque la liste de balises que vous stylisez avec flexbox est générée de manière dynamique, le ciblage d'éléments spécifiques tels que "item-13" n'est pas pratique.

Heureusement, Flexbox propose des options pour résoudre ce problème sans recourir au ciblage manuel :

Mise à jour (2021) : Les navigateurs modernes prennent en charge la propriété gap pour Flexbox. Cette propriété ajoute un espacement entre les éléments flexibles, à la fois horizontalement et verticalement. Pour supprimer la marge inférieure, définissez simplement l'écart sur la valeur souhaitée :

.tags {
  gap: 5px;
}

Anciens navigateurs (avant 2021) :

Utilisation du nième enfant :

Le sélecteur nth-child() permet de cibler des éléments en fonction de leur position dans une liste. Cependant, comme la position du dernier élément peut varier, cette méthode peut s'avérer peu fiable pour les listes dynamiques.

Utilisation du dernier nième de type :

Un plus Une approche robuste consiste à utiliser :last-of-type après le sélecteur nth-child(). Cela garantit que vous ciblez le dernier élément d'un type spécifique dans son conteneur :

li:nth-child(n+0):last-of-type {
  margin-bottom: 0;
}

Modification de l'affichage :

Vous pouvez également modifier le mode d'affichage de les éléments de votre liste interne de flex à inline-flex. Cette option supprime toutes les marges et ajoute un espacement entre les éléments par défaut.

.tag {
  display: inline-flex;
  margin: 0 5px 5px; /* Unnecessary now */
}

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!