Comment puis-je garantir un espacement uniforme dans la dernière ligne d'une grille Flexbox avec « justifier-content : space-between » ?

Flex-box : Aligner la dernière ligne d'une grille

Dans un conteneur flex-box avec flex-flow : row wrap ; et justifier-contenu : espace-entre ;, les éléments de la dernière ligne peuvent ne pas être alignés correctement. Cet article explore une solution simple pour aligner la dernière ligne avec les autres lignes, en conservant l'espacement souhaité.

La solution utilise le pseudo-élément ::after pour remplir automatiquement l'espace restant dans le conteneur. En attribuant flex: auto; à ::after, il remplit l'espace vacant sans aucun contenu supplémentaire dans le HTML.

.grid {<br> display: flex;<br> flex-flow: row wrap;<br> justifier-contenu : espace-entre ;<br>}</p><p>.grid::after {<br> contenu : "";<br> flex: auto;<br>}<br>

Cette approche fournit une solution claire et simple, évitant d'avoir à ajouter des éléments inutiles au code HTML. Découvrez la démo en direct sur http://codepen.io/DanAndreasson/pen/ZQXLXj pour constater son efficacité.

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!