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

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 AM

How Can Flexbox Achieve Justified Alignment for Variable-Width Elements on the Last Row?

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;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Ajout d'ombres de boîte aux blocs et éléments WordPress Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

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éez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

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

Créer un éditeur de texte en ligne avec l'attribut satisfaistable Créer un éditeur de texte en ligne avec l'attribut satisfaistable Mar 02, 2025 am 09:03 AM

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

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

Faire votre première transition Svelte personnalisée

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Travailler avec GraphQL Caching

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Mar 04, 2025 am 10:22 AM

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

Téléchargement de fichiers avec Multer dans Node.js et Express Téléchargement de fichiers avec Multer dans Node.js et Express Mar 02, 2025 am 09:15 AM

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

Show, ne dit pas Show, ne dit pas Mar 16, 2025 am 11:49 AM

Show, ne dit pas

See all articles