Comment justifier la flexibilité des largeurs d'éléments sur la dernière ligne sans étirement ?

Justifier les largeurs d'éléments flexibles sur la dernière ligne

Le défi se pose lorsque l'on essaie de répartir les éléments uniformément dans le conteneur, à l'exception de la dernière ligne . Aligner simplement les éléments à l'aide de text-align: justifier ne suffit pas, car il n'y a pas d'espace entre les éléments. Flexbox fournit une solution, mais le comportement par défaut étend les éléments de la dernière ligne sur toute la largeur.

Pour obtenir un comportement de type justifier-aligner, où les éléments utilisent la largeur naturelle de la dernière ligne, utilisez l'approche suivante :

1. Ajouter des éléments fantômes :
   Créez plusieurs éléments "fantômes" qui occupent les derniers emplacements du conteneur. Ces éléments peuvent être masqués avec visibilité : caché.

Par exemple, avec l'utilisateur #82 comme dernière entrée, ajoutez les faux utilisateurs 83, 84 et 85 avec visibilité : caché.

2. Utiliser un seul élément fantôme :
   Vous pouvez également utiliser un seul élément fantôme à la fin avec une visibilité : cachée et flex-grow : 10. Ciblez-le à l'aide de la pseudo-classe :last-child ou :last-of-type.

Cette méthode permet aux éléments de la dernière ligne de conserver leur largeur naturelle tout en répartissant le reste espacez uniformément sur les éléments fantômes.

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!