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

Ajout d'une marge de 1 px aux éléments flexibles avec flex : 0 0 25 %

Lorsque vous travaillez avec des mises en page flexibles, il peut être souhaitable d'ajouter une petite marge, telle que 1px, pour fléchir les éléments. Cependant, flexbox n'autorise pas intrinsèquement les valeurs fractionnaires comme marges.

Pour les éléments flexibles définis à l'aide de flex : 0 0 25 %, l'ajout direct d'une marge de 1 px n'est pas possible. En effet, la base flexible est fixée à 25 %, ne laissant aucun espace disponible pour une marge.

Solution :

Pour obtenir une marge de 1 px dans ce scénario, exploiter la propriété flex-grow :

flex: 1 0 22%;

• flex : 1 : Le flex-grow permet à l'élément de se développer au-delà de sa base flex spécifiée.
• 0 : flex-shrink est défini sur 0 pour garantir que l'élément ne rétrécira pas en dessous de sa base flex.
• 22 % : la base flex est réduite à 22 % pour tenir compte de la marge souhaitée de 1 px de chaque côté (2/11 = 0,19 % par côté, ce qui, une fois ajouté à 22 %, donne 25%).

En réduisant la flex-base et en augmentant la flex-grow, l'élément aura la marge souhaitée tout en conservant ses proportions définies.

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>

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!