Comment obtenir une marge précise de 1 px sur les articles Flex avec « flex : 0 0 25 % » ?

Énigme de la marge Flexbox : ajout d'une marge précise de 1 px aux éléments flexibles avec flex : 0 0 25 %

Lors de l'expérimentation avec flexbox mises en page, vous pouvez rencontrer des scénarios dans lesquels l'application d'une marge de 1 px aux éléments flexibles définis sur « flex : 0 0 25 % » s'avère difficile, car 1 % crée un espacement excessif. Pour résoudre ce problème, envisagez l'approche suivante :

Dans l'extrait CSS fourni, la classe 'foto' a 'flex: 0 0 25%'. Pour obtenir une marge de 1 px, vous pouvez modifier ce paramètre en « flex : 1 0 22 % ». Cela allouera 22 % à la base flexible des éléments, garantissant quatre éléments par ligne. Flex-grow est défini sur 1, ce qui entraîne l'expansion des éléments et la consommation de l'espace de marge restant.

 display : flex;<br> flex-wrap: wrap;<br> justifier-content: espace-autour;<br> margin: 10px;<br>}</p><p>/<em> Marges mises à jour pour un espacement de 1px </em>/<br>.foto {<br> flex : 1 0 22%;<br> min-height : 50px ; <br> marge : 1px ;<br> couleur de fond : rouge;<br>}

 <div class="foto foto1">1</div><br> <div> <div class="foto foto3" >3</div><br> <div> <div class="photo foto5">5</div><br> <div> <div class="foto foto7">7</div><br> <div> <div class="foto foto9"> 9</div><br> <div> <div class="photo foto2">2</div><br> <div></div>

Avec ce réglage, chaque L'élément « photo » conservera la largeur souhaitée de 22 %, tout en gagnant une marge nette de 1 px. Cette solution répond efficacement à la situation et offre un meilleur contrôle sur la disposition de votre flexbox.

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!