À quoi sert Flexbox?

Flexbox est utilisé pour créer des mises en page flexibles et adaptatives en CSS. Il permet d'aligner et de répartir facilement les éléments à l'intérieur du conteneur, en ajustant automatiquement leur taille et leur position en fonction de l'espace disponible.

Concepts clés de Flexbox :

• Conteneur Flex : Élément auquel on applique display: flex; ou display: inline-flex;. Il contient des éléments flex.
• Éléments Flex : Enfants directs du conteneur flex.

Flexbox permet de contrôler :

• La direction de disposition des éléments (flex-direction).
• Le passage des éléments à la ligne/colonne suivante (flex-wrap).
• L'alignement des éléments le long de l'axe principal (justify-content).
• L'alignement des éléments le long de l'axe transversal (align-items pour les éléments individuels et align-content pour plusieurs lignes/colonnes).
• L'ordre d'affichage des éléments (order).
• La répartition de l'espace libre entre les éléments (flex-grow, flex-shrink, flex-basis).

Exemple d'utilisation de base :

.conteneur {
  display: flex;
  justify-content: center; /* Alignement horizontal centré */
  align-items: center; /* Alignement vertical centré */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="conteneur">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>