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

L'**axe secondaire ****est l'axe perpendiculaire à l'axe principal.

La propriété align-items définit l'alignement des éléments sur cet axe secondaire.

Par défaut, les élément prennent toute la place disponible sur l'axe secondaire.

<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 aligner les éléments au début de l'axe secondaire:

.parent {
  display: flex;
	align-items: flex-start;
}

À la fin de l'axe secondaire:

.parent {
  display: flex;
	align-items: flex-end;
}

Au milieu de l'axe secondaire:

.parent {
  display: flex;
	align-items: center;
}