Comment puis-je aligner la dernière ligne d'éléments dans une Flexbox avec « justifier-content : space-between ; » ?

Alignement des éléments de la dernière ligne avec Flex-box

Les mises en page Flex-box sont connues pour leur flexibilité dans l'organisation du contenu. Dans un scénario où vous disposez d'un conteneur flex-box avec des éléments disposés à l'aide de flex-flow : row wrap; et justifier-contenu : espace-entre ;, vous pouvez rencontrer une situation dans laquelle vous souhaitez que les éléments de la dernière ligne soient alignés avec les autres.

Réaliser l'alignement avec justifier-contenu : espace-entre ;

Pour réaliser cet alignement tout en conservant l'utilisation de justification-contenu : espace-entre ; pour des dimensions de grille réglables, vous pouvez utiliser la méthode suivante :

 display : flex ;<br> flex-flow : row wrap;<br> justification-content : space-between ;<br> }</p><p>.grid::after {<br> contenu : "";<br> flex : auto;<br>}<br>

Ce code CSS ajoute un élément invisible (::after) au conteneur. Cet élément occupe l'espace restant dans le conteneur, alignant efficacement les éléments de la dernière ligne avec les autres tout en préservant la répartition souhaitée pour les autres lignes.

Exemple

Considérons l'exemple suivant où le dernier élément de ligne doit être aligné dans la "colonne du milieu" :

 affichage : flex;<br> flex-flow : retour à la ligne ;<br> justifier-content : espace-entre;<br>}</p><p>.grid::after {<br> content: "";<br> flex: auto;<br>}</p><p>.item {<br> largeur : 100px;<br> height: 100px;<br> background-color: #ccc;<br>}<br>

Ce code crée un conteneur flex-box avec des éléments enveloppés sur plusieurs rangées. L'élément ::after garantit que le dernier élément de ligne est aligné avec les autres, conservant la répartition des autres lignes même si la largeur du conteneur varie.

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!