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

Flex-box : Comment aligner la dernière ligne sur la grille

Dans une disposition de boîte flexible avec un conteneur comme :

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

Le but est d'aligner les éléments de la dernière rangée pour qu'ils soient au même niveau que les autres. Utilisation de justifier-contenu : espace-entre ; reste crucial en raison de la largeur et de la hauteur de la grille réglables.

Actuellement, avec :

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

.item {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

L'élément en bas à droite apparaît mal aligné.

Pour résoudre ce problème :

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

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

Un ::after est ajouté pour remplir automatiquement l'espace, éliminant ainsi le besoin d'ajustements HTML.

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!