Maison > interface Web > tutoriel CSS > Comment aligner parfaitement les éléments flexibles sur la dernière ligne avec des largeurs imprévisibles ?

Comment aligner parfaitement les éléments flexibles sur la dernière ligne avec des largeurs imprévisibles ?

Mary-Kate Olsen
Libérer: 2024-12-06 15:00:15
original
651 Les gens l'ont consulté

How to Perfectly Align Flex Items on the Last Row with Unpredictable Widths?

Comment dimensionner et aligner parfaitement les éléments flexibles sur la dernière ligne

Lorsque vous travaillez avec une liste d'éléments flexibles, vous pouvez rencontrer des incohérences dans l'alignement du bord droit, en particulier lorsque les largeurs des éléments sont imprévisibles ou dynamiques. Bien que les techniques de largeurs fixes ou d'affichage : tableaux puissent ne pas donner de résultats satisfaisants, envisagez l'approche suivante utilisant flexbox pour un contrôle précis de la taille et de l'alignement :

Solution utilisant Flexbox :

  1. Définissez le conteneur parent pour afficher : flex; et flex-wrap : enveloppe ; pour permettre plusieurs lignes.
  2. Appliquer flex: 1 0 auto; aux éléments flexibles pour les rendre flexibles et rétrécir si nécessaire.

Cependant, si cela entraîne un étirement trop large de la dernière ligne, vous pouvez mettre en œuvre la solution de contournement suivante :

Astuce de l'élément fantôme :

Pour obtenir un comportement de type justification-alignement, envisagez de créer des éléments flexibles « fantômes » qui occupent toujours le dernier créneaux. Cela peut être fait en ajoutant le code suivant au conteneur parent :

.parent-container:after {
    content: '';
    flex: 10 0 auto;
}
Copier après la connexion

Cet élément fantôme ajustera automatiquement sa largeur pour remplir l'espace restant sur la dernière ligne, garantissant ainsi que les véritables éléments flexibles conservent leur aspect naturel. largeurs.

Exemple d'implémentation :

Dans l'exemple donné, vous pouvez implémenter la solution comme suit :

.userlist {
    display: flex;
    flex-wrap: wrap;
}

.userlist:after {
    content: '';
    flex: 10 0 auto;
}
Copier après la connexion

Cela créera un seul élément fantôme qui occupera toujours le dernier emplacement du conteneur .userlist, ce qui entraînera l'espacement et l'alignement souhaités.

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal