La propriété gap permet de définir l’espace entre les éléments enfants.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  display: flex;
  gap: 30px;
}

Si une seule valeur est définie, elle vaut pour l’axe des X et l’axe des Y.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  display: flex;
  gap: 30px;
}

Si une deux valeurs sont définies, la première vaut pour l’axe des Y et la seconde pour l’axe des X.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  display: flex;
  gap: 50px 30px;
}

<aside> ⬅️ flex-wrap

</aside>