Comment supprimer la marge inférieure des éléments flexibles lors de leur emballage ?

Supprimer la marge des éléments flexibles lors de leur emballage

Lorsque vous travaillez avec flexbox, il est souvent nécessaire de supprimer la marge inférieure du dernier élément d'affilée, en particulier lors de la création des listes dynamiques où le ciblage d'éléments spécifiques n'est pas possible. Cela peut entraîner un espacement inégal entre les éléments de différentes lignes.

Dans ce contexte, flexbox n'offre pas de fonctionnalité inhérente permettant de modifier les styles CSS en fonction de la position d'un élément dans une ligne. Cependant, il existe des approches alternatives pour obtenir l'effet souhaité.

Utilisation de la propriété gap

CSS a introduit la propriété gap, qui peut être utilisée pour ajouter de l'espace entre les éléments flexibles. Lorsqu'il est défini sur une valeur appropriée, il peut effectivement supprimer la marge du dernier élément de chaque ligne. Cependant, cette propriété n'est pas prise en charge par les anciens navigateurs.

.tags {
  gap: 5px;
}

Ajuster les marges

Une autre approche consiste à modifier la marge inférieure de l'élément li, mais uniquement lorsqu'il s'agit du dernier élément de une rangée. Pour cela, nous pouvons utiliser JavaScript pour ajuster dynamiquement les styles en fonction de la position de l'élément dans son conteneur.

const tags = document.querySelectorAll('.tags li');
tags.forEach((tag, index) => {
  if (index % 4 === 3) {
    tag.style.marginBottom = 0;
  }
});

Utilisation de pseudo-éléments

Des pseudo-éléments peuvent également être utilisés pour insérer un élément invisible avant ou après le dernier élément de chaque ligne et appliquez-lui des styles, par exemple en définissant une marge négative pour annuler la marge du li élément.

.tags li:last-of-type::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: -5px;
}

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!