"Display:flex" est une propriété CSS qui permet de créer des layouts "flexibles" en utilisant des conteneurs (éléments parent) et des éléments enfants (éléments contenus dans le parent).

<style>

.container {
  display: flex;
}

.child {
  width: 100px;
  height: 100px;
  background-color: #ccc;

}
</style>

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

Dans cet exemple, le conteneur parent est un élément <div> avec la classe "container". Les éléments enfants sont des <div> avec la classe "child". La propriété "display:flex" est ajoutée à la classe "container" pour le définir en tant que conteneur flexible. Les éléments enfants ont une largeur et une hauteur définies, ainsi qu'une marge, pour les séparer les uns des autres.

Vous pouvez ensuite utiliser d'autres propriétés CSS telles que "justify-content" pour aligner les éléments horizontalement, "align-items" pour les aligner verticalement, ou "flex-wrap" pour contrôler le retour à la ligne des éléments en fonction de l'espace disponible.

Flex-wrap

.container {
	display: flex;
    flex-wrap: nowrap; /* les éléments sont affichés sur une seule ligne (défaut)  */
    flex-wrap: wrap; /* les éléments sont affichés sur plusieurs lignes */
    flex-wrap: wrap-reverse; /* les éléments sont affichés sur plusieurs lignes, dans l'ordre inverse */
}

Gap

.container {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
      }

Justify-content

La propriété "justify-content" est utilisée en conjonction avec "display:flex" pour aligner horizontalement les éléments contenus dans un conteneur flexible.

.container {
	display: flex;
	justify-content: flex-start; /* aligne les éléments à gauche (défaut)  */
	justify-content: flex-end; /* aligne les éléments à droite  */
	justify-content: center; /* aligne les éléments au centre horizontalement */
	justify-content: space-between; /* répartit les éléments de manière égale, en laissant un espace nul entre eux  */
	justify-content: space-around; /* répartit les éléments de manière égale, en laissant un espace égal autour d'eux */
	justify-content: space-evenly; /* répartit les éléments de manière égale, en laissant un espace égal autour d'eux et entre eux  */
}

Align-items

La propriété "align-items" est utilisée en conjonction avec "display:flex" pour aligner verticalement les éléments contenus dans un conteneur flexible. Voici les étapes pour utiliser "align-items" :

.container {
	display: flex;
	align-items: stretch; /* étend les éléments pour remplir l'espace disponible verticalement (défaut) */
	align-items: flex-start; /* aligne les éléments en haut (défaut)  */
	align-items: flex-end; /* aligne les éléments en bas */
	align-items: center; /* aligne les éléments au centre verticalement */
	align-items: baseline; /* alignés en fonction de la première ligne de texte dans chaque élément. */
}