Comment puis-je justifier les éléments Flexbox de la dernière ligne par rapport à leur largeur naturelle ?

Réalisation d'un alignement justifié avec Flexbox pour les éléments dynamiques de la dernière ligne

Dans ce scénario, l'objectif est de garantir que les éléments flexibles de la dernière Les rangées d'un conteneur s'alignent naturellement sur la largeur de leur contenu, tout en respectant l'espace disponible du conteneur. Cela contredit le comportement inhérent de flexbox pour étirer les éléments flex pour remplir toute la ligne.

Tentative de justification de Flexbox

Une première tentative d'utilisation de flexbox avec display: flex; et flex-wrap : enveloppe ; obtient un résultat décent jusqu'à atteindre la dernière ligne, où tous les éléments flexibles s'étirent pour s'adapter à la largeur du conteneur. Cet effet n'est pas souhaitable, surtout lorsqu'il ne reste qu'un ou deux éléments sur la dernière ligne.

Solution : Éléments fantômes et Flex-Grow

La solution consiste à introduire "fantôme " éléments qui occupent continuellement la dernière ligne, servant essentiellement d'espaces réservés pour remplir l'espace excédentaire et empêcher les éléments restants de trop s'étirer. Pour mettre en œuvre cette approche :

1. Après le dernier élément flexible réel dans le conteneur, ajoutez 3 à 4 éléments fantômes avec des dimensions et une visibilité égales : cachés.
2. Vous pouvez également créer un seul fantôme. élément avec visibilité : caché et flex-grow : 10. Utilisez la pseudo-classe :last-child ou :last-of-type pour cibler spécifiquement cela element.

Mise en œuvre pratique

Par exemple, si l'utilisateur #82 est le dernier élément visible dans le conteneur :

• Ajoutez les utilisateurs fantômes #83, #84 et #85 avec visibilité : masquée.
• Ou ajoutez un seul fantôme. élément avec visibilité : caché et flex-grow : 10, ciblé comme :last-child.

Résultat

Cette approche aboutit à la dernière rangée de flex les éléments s'alignent naturellement sur la largeur de leur contenu, éliminant ainsi l'étirement excessif observé précédemment. L'espace du conteneur est efficacement rempli sans sacrifier le comportement d'alignement souhaité.

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!