Comment puis-je ajouter une marge de 1 px aux éléments Flexbox avec « flex : 0 0 25 % » ?

Existe-t-il un moyen d'ajouter une marge de 1 px aux éléments Flexbox Flex désigné : 0 0 25 % ?

Pour ajouter une marge de 1 px à la flexbox éléments définis sur flex : 0 0 25 %, ajustez la propriété flex sur flex : 1 0 22 %. Cela définira la base flexible de l'élément à 22 % (autorisant quatre éléments par ligne) tout en leur permettant de croître et de remplir l'espace restant via la marge de 1 px (flex-grow défini sur 1).

Voici un exemple :

#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;
}

<div>

Cette modification permet une marge de 1px entre les éléments flexibles tout en préservant la mise en page souhaitée.

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!