


Comment Flexbox peut-il obtenir un alignement justifié pour les éléments à largeur variable sur la dernière ligne ?
Dec 05, 2024 am 01:17 AMMaî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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express
