Comment ajuster l'espacement dans la galerie d'images des éléments flex avec des marges

dans les dispositions flexibles, les éléments avec des valeurs flexibles de '0 0 25%' ont une largeur fixe et ne rétrécissent pas ou ne se développent 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, l'application d'une marge de 1% entraîne des lacunes qui peuvent être trop importantes.

pour atteindre une marge 1px, utilisez la valeur flexible «1 0 22%». Cela donne le bassin flexible à 22%, garantissant qu'il n'y a que quatre éléments par rangée. La valeur de flexion de la croissance est réglée sur 1, permettant aux articles de se développer et de remplir l'espace restant laissé par les marges. Cela crée un écart de 1px subtil 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;
}