Qu'est-ce que Flexbox?

Flexbox (Flexible Box Layout) est un module CSS conçu pour créer des mises en page complexes et adaptatives. Il permet de gérer la disposition, l'alignement et la répartition de l'espace entre les éléments du conteneur, même si leurs tailles sont inconnues ou dynamiques.

Concepts clés de Flexbox :

• Axe principal (main axis) : Axe le long duquel les éléments sont disposés. Par défaut, horizontal (de gauche à droite).
• Axe transversal (cross axis) : Axe perpendiculaire à l'axe principal. Par défaut, vertical (de haut en bas).
• Conteneur (flex container) : Élément auquel on applique les propriétés Flexbox (display: flex ou display: inline-flex).
• Éléments (flex items) : Éléments enfants du conteneur.

Propriétés pour le conteneur Flex :

• display : flex ou inline-flex
• flex-direction : Définit la direction de l'axe principal (row, row-reverse, column, column-reverse)
• flex-wrap : Définit si les éléments se replient sur une nouvelle ligne (nowrap, wrap, wrap-reverse)
• justify-content : Alignement des éléments le long de l'axe principal (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items : Alignement des éléments le long de l'axe transversal (flex-start, flex-end, center, baseline, stretch)
• align-content : Alignement des lignes ou colonnes le long de l'axe transversal dans un conteneur multi-lignes (flex-start, flex-end, center, space-between, space-around, stretch)

Propriétés pour les éléments Flex :

• order : Définit l'ordre de l'élément dans le conteneur
• flex-grow : Détermine dans quelle mesure l'élément doit croître pour occuper l'espace disponible
• flex-shrink : Détermine dans quelle mesure l'élément doit se réduire si l'espace est insuffisant
• flex-basis : Définit la taille initiale de l'élément avant la distribution de l'espace
• flex : Propriété abrégée pour flex-grow, flex-shrink et flex-basis
• align-self : Redéfinit l'alignement de l'élément le long de l'axe transversal (flex-start, flex-end, center, baseline, stretch, auto)

Exemple d'utilisation :

/* Conteneur */
.container {
  display: flex; /* Active Flexbox */
  flex-direction: row; /* Disposition en ligne */
  justify-content: center; /* Centrage horizontal */
  align-items: center; /* Centrage vertical */
  height: 200px; /* Hauteur du conteneur */
  border: 1px solid black;
}

/* Éléments */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox facilite grandement la création de mises en page adaptatives par rapport aux méthodes traditionnelles (float, inline-block, table).