Comment puis-je aligner uniformément la dernière ligne d'une grille Flexbox avec « justifier-content : space-between » ?

Flex-Box : aligner la dernière ligne sur la grille

Dans une disposition de boîte flexible, aligner les éléments de la dernière ligne avec les autres peut présenter un défi. Avec justifier-content: espace-entre;, l'ajustement de la taille de la grille peut perturber l'alignement.

Pour résoudre ce problème, une solution simple et élégante a émergé :

Utiliser ::after

Ajoutez un pseudo-élément ::after qui remplit automatiquement l'espace restant :

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Comment ça Fonctionne :

Le pseudo-élément ::after crée un élément virtuel qui remplit l'espace vide de la grille. En lui donnant flex: auto;, il s'ajuste automatiquement pour s'adapter. Ainsi, les éléments de la dernière ligne s'alignent de manière transparente quelle que soit la taille de la grille et sans modifier la structure HTML.

Pour une démonstration en direct, reportez-vous à l'exemple CodePen fourni ici : http://codepen.io/DanAndreasson/pen /ZQXLXj

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!