Comment supprimer la marge indésirable de la dernière rangée d'éléments flexibles lors de leur emballage ?

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

Lorsque vous travaillez avec des mises en page flexbox, il est possible de rencontrer un scénario où la dernière ligne de Les éléments flexibles dans un conteneur ont une marge inférieure indésirable en raison du dernier élément qui en hérite de sa classe CSS. Cela devient difficile lorsque la liste de balises est dynamique et il est peu pratique de cibler des éléments spécifiques en fonction de leur index (c'est-à-dire l'élément-13, l'élément-14, etc.).

Solution

Flexbox ne fournit pas de moyen direct d'éliminer la marge de la dernière ligne d'éléments. Il existe cependant quelques approches alternatives :

1. Utilisation de la propriété Gap

Dans les navigateurs modernes, la propriété CSS gap peut être utilisée pour créer un espace entre les éléments flexibles. En définissant une valeur d'écart, vous pouvez automatiquement ajouter de l'espace entre tous les éléments flexibles, éliminant ainsi le besoin de marge.

.container {
  ...
  gap: 5px;                          /* added */
}

2. Sélection basée sur les lignes

Si la liste de balises est un enfant d'un autre conteneur de hauteur connue, vous pouvez supprimer sélectivement la marge inférieure de la dernière ligne à l'aide du sélecteur CSS nth-child() :

.container .tags li:nth-child(12n) {
  margin-bottom: 0;
}

3. Largeur calculée de l'enfant

Dans certains cas, il peut être possible de calculer la largeur de chaque enfant et de l'ajouter au conteneur flexible. Le conteneur enveloppera ainsi les enfants de manière uniforme, éliminant ainsi le besoin d'une marge explicite.

.container {
  ...
  display: flex;
  flex-wrap: wrap;
  width: 100%;  /* width based on child count and their individual widths */
}

.tag {
  width: 20%;
}

Remarque : La propriété gap est prise en charge par les navigateurs modernes, notamment Chrome, Firefox et Safari. Il revient à 0 dans les navigateurs non pris en charge.

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!