Comment obtenir un espacement de 1 px entre les éléments flexibles dans une galerie d'images ?

Comment ajuster l'espacement dans la galerie d'images pour les éléments flexibles avec des marges

Dans les mises en page Flexbox, les éléments avec des valeurs flexibles de « 0 0 25 % » ont une largeur fixe et ne rétrécissent pas ou ne grandissent pas. Pour ajouter de l'espace entre ces éléments tout en conservant une structure en forme de grille, des marges peuvent être appliquées. Cependant, appliquer une marge de 1 % entraîne des écarts qui peuvent être trop importants.

Pour obtenir une marge de 1 px, utilisez la valeur de flexion '1 0 22%'. Cela définit la base flexible à 22 %, garantissant qu'il n'y a que quatre éléments par ligne. La valeur flex-grow est définie sur 1, permettant aux éléments de croître et de remplir l'espace restant laissé par les marges. Cela crée un subtil écart de 1 px entre les éléments.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

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!