La propriété flex-direction définit l'axe principal sur lequel sont alignés les éléments:

La propriété justify-content définit l'alignement des éléments sur cet axe principal.

Par défaut, les éléments sont alignés au début de l'axe principal:

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

.parent {
  display: flex;
}

On peut également les aligner à la fin de l'axe principal:

.parent {
  display: flex;
  justify-content: flex-end;
}

Au milieu de l'axe principal:

.parent {
  display: flex;
  justify-content: center;
}

Répartir l'espace disponible entre les éléments:

.parent {
  display: flex;
  justify-content: space-between;
}