Comment puis-je empêcher l'étirement de la dernière ligne dans les mises en page Flexbox ?

Dimensionnement et alignement appropriés des éléments flexibles de la dernière ligne

Dans un scénario où des éléments de bloc en ligne contenant des noms d'utilisateur et des éléments associés les nombres s'affichent avec des bords droits incohérents, l'objectif est d'obtenir un comportement d'alignement de justification cohérent et dynamique.

Flexbox propose une solution pour ce problème d'alignement. En appliquant display: flex; flex-wrap : envelopper ; au conteneur et flex : 1 0 auto ; aux éléments, vous pouvez obtenir un résultat satisfaisant. Cependant, la dernière ligne d'éléments s'étire toujours de manière anormale.

Pour résoudre ce problème et éviter les étirements indésirables, une technique utilisant des éléments « fantômes » peut être utilisée. En créant 3 ou 4 éléments "fantômes" invisibles qui occupent toujours les derniers emplacements, la largeur naturelle des éléments de la dernière ligne est préservée.

Alternativement, vous pouvez utiliser un seul élément "fantôme" avec visibilité : caché et flex-grow : 10. Cibler cet élément avec la pseudo-classe :last-child ou :last-of-type garantit qu'il occupe toujours la dernière position.

Ceci La technique atteint efficacement un comportement de type justification-alignement, permettant aux éléments de remplir la largeur du conteneur sans trop s'étirer sur la dernière ligne, ce qui donne une mise en page visuellement agréable.

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!