En effet, il peut être intéressant d'avoir une marge, qui permette d'empêcher les éléments de se toucher avant de passé à la ligne. Problème: si vous ajoutez une marge, elle s'ajoute aussi sur les bords extérieurs de la flexbox, et ceux-ci ne sont donc plus alignés!

pas de panique, il existe des solutions!

nous alons voir ici une solution que j'aime particulièrement:

si par exemple vous décider d'une marge de 1% (ce peut être n'importe quel unitée, considéré que 1% est en réalitée une variable de distance css): si votre flexbox fait 100%, il vous manque 1% de chaque coté. vous pouvez donc dire: la flexbox fait 102%. Alors, elle a la bonne width, mais elle commence 1% trop loin. l'astuce, c'est que vous pouvez mettre a votre élément parent une marge négative (ici -1%)!

voici un exemple:

:root{
   --marge:1%;
}
.parent{
   display: flex;
   flex-wrap: wrap;
   width: calc(100% + (var(--marge) * 2));
   justify-content: space-between;
   margin-left: -var(--marge);
}
.child{
   margin: var(--marge);
}