human
Pour définir la distance minimale entre les éléments flexbox, j'utilise ```margin: 0 5px``` sur ```.item``` et ```margin: 0 -5px``` sur le conteneur. Pour moi, cela semble être une astuce, mais je ne trouve pas de meilleure façon de le faire.


```#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}```
```
  
  
  
  
``
gpt
Cette solution fonctionnera pour tous les cas, même s'il y a plusieurs lignes ou un nombre quelconque d'éléments. Mais le nombre de sections doit être le même. Si vous voulez 4 éléments dans la première ligne et 3 dans la deuxième ligne, cela ne fonctionnera pas de cette façon, l'espace pour le 4ème contenu sera vide et le conteneur ne se remplira pas.
Nous utilisons ```display: grid;``` et ses propriétés.


```#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Espace entre les éléments */
  grid-template-columns: repeat(4,1fr);
  /* Détermine le nombre de colonnes (4) et la taille (1fr | 1 fraction | vous pouvez également utiliser des pixels et d'autres valeurs) */
}
.item {
  background: gray;
  width: 100%;
  /* La largeur n'est pas nécessaire, elle est ajoutée uniquement pour comprendre que la largeur fonctionne comme 100% de l'espace alloué par le modèle de grille **LA LARGEUR PAR DÉFAUT SERA DE 100%** */
  height: 50px;
}```
```
  
  
  
  
  
  
  
  
```



L'inconvénient de cette méthode est qu'elle n'est pas prise en charge par Mobile Opera Mini et qu'elle ne fonctionne qu'à partir de IE10 sur PC.
Notez que pour une compatibilité complète avec tous les navigateurs, y compris IE11, veuillez utiliser Autoprefixer.

ANCIENNE RÉPONSE
Ne considérez pas cela comme une ancienne solution, c'est toujours l'une des meilleures si vous ne voulez qu'une seule ligne d'éléments et cela fonctionnera avec tous les navigateurs.
Cette méthode utilise la combinaison de frères CSS, vous pouvez donc également la manipuler de nombreuses autres manières, mais si votre combinaison est incorrecte, cela peut également causer des problèmes.
```.item+.item{
  margin-left: 5px;
}
```
Le code ci-dessous fera l'affaire. Dans cette méthode, il n'est pas nécessaire de donner ```margin: 0 -5px;``` à l'enveloppe ```#box```.
Un exemple fonctionnel pour vous:


```#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}```
```
  
  
  
  
```