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

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;
}

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;
}

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!