Comment Flexbox peut-il obtenir un alignement justifié pour les éléments à largeur variable sur la dernière ligne ?

Maîtriser Flexbox : obtenir un alignement justifié pour les éléments à largeur variable

Dans le domaine de la conception Web, il est souvent souhaitable d'aligner les éléments de manière manière qui optimise l’espace et crée une disposition visuellement agréable. Flexbox s'est imposé comme un outil puissant pour atteindre cet objectif, mais certains scénarios peuvent présenter des défis uniques.

L'un de ces défis se pose lorsqu'il s'agit d'objets de largeur variable disposés dans un conteneur flexible. Considérons une liste d'utilisateurs, chacun avec un nom et un numéro associé. Lorsqu'ils sont enveloppés à l'aide de flexbox, ces éléments peuvent s'étendre pour remplir toute la largeur du conteneur, créant des espaces disgracieux sur la dernière ligne.

Le comportement souhaité est d'aligner les éléments de la dernière ligne en utilisant leurs largeurs naturelles, tandis que s'assurer que les éléments de toutes les autres rangées utilisent pleinement la largeur du conteneur. Pour y parvenir, une technique impliquant des objets fantômes peut être utilisée.

Solution : Objets fantômes

La clé pour résoudre ce problème d'alignement est d'introduire des objets fantômes qui occupent le derniers emplacements sur la dernière ligne. Ces éléments sont rendus invisibles grâce à la visibilité : masqué, tandis que leur propriété flex-grow garantit qu'ils remplissent l'espace restant sur la ligne.

Implémentation

Pour mettre en œuvre cette solution , on peut ajouter des éléments fantômes à la fin du conteneur. Par exemple, en considérant une liste de 82 utilisateurs, trois éléments fantômes peuvent être créés avec le CSS suivant :

.userlist:after {
    content: "";
    flex: 10 0 auto;
    visibility: hidden;
}

Une approche alternative consiste à créer un seul élément fantôme avec flex-grow:10 et à le cibler en utilisant : pseudo-classes last-child ou :last-of-type.

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!