Qu'est-ce que Flexbox?

Flexbox (Disposition Flexible de Boîte) est un modèle de mise en page unidimensionnel en CSS, conçu pour répartir l’espace entre les éléments dans un conteneur et offrir de puissantes capacités d’alignement. Il permet de gérer facilement les tailles, l’ordre et l’alignement des éléments enfants (éléments flex) à l’intérieur du conteneur parent (conteneur flex), indépendamment de leur ordre ou taille d’origine.

Concepts clés de Flexbox :

Conteneur flex : Élément avec display: flex ou display: inline-flex. C’est dans ce conteneur que sont définies les règles de mise en page pour ses éléments enfants directs.
Éléments flex : Éléments enfants directs du conteneur flex. Des propriétés Flexbox leur sont appliquées pour déterminer leur comportement dans le conteneur.
Axe principal (main axis) : Axe le long duquel sont disposés les éléments flex. Par défaut horizontal (de gauche à droite), mais peut être modifié avec flex-direction.
Axe transversal (cross axis) : Axe perpendiculaire à l’axe principal.
Début principal (main start) / Fin principal (main end) : Début et fin le long de l’axe principal.
Début transversal (cross start) / Fin transversal (cross end) : Début et fin le long de l’axe transversal.

Propriétés principales de Flexbox pour le conteneur flex :

display : Définit que l’élément est un conteneur flex (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 flex se replient sur une nouvelle ligne/colonne si l’espace est insuffisant (nowrap, wrap, wrap-reverse).
justify-content : Aligne les éléments flex le long de l’axe principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items : Aligne les éléments flex le long de l’axe transversal (flex-start, flex-end, center, baseline, stretch).
align-content : Aligne les lignes d’éléments flex (si plusieurs en raison de flex-wrap) le long de l’axe transversal.

Propriétés principales de Flexbox pour les éléments flex :

order : Détermine l’ordre d’affichage de l’élément flex (par défaut 0).
flex-grow : Coefficient de croissance de l’élément flex, déterminant dans quelle mesure il peut augmenter pour remplir l’espace disponible.
flex-shrink : Coefficient de réduction de l’élément flex, déterminant dans quelle mesure il peut diminuer pour éviter le débordement.
flex-basis : Taille initiale de l’élément flex avant la distribution de l’espace libre.
flex : Abréviation pour flex-grow, flex-shrink et flex-basis.
align-self : Redéfinit align-items pour un élément flex spécifique.

Exemple d’utilisation :

HTML :

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS :

.flex-container {
  display: flex; /* Rend le conteneur flexible */
  justify-content: center; /* Aligne les éléments au centre de l’axe principal */
  align-items: center; /* Aligne les éléments au centre de l’axe transversal */
  height: 200px; /* Pour démonstration de l’alignement */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Principaux avantages de Flexbox :

Alignement facile des éléments horizontalement et verticalement.
Répartition flexible de l’espace entre les éléments.
Changement facile de l’ordre des éléments.
Design adaptatif sans utiliser float ni position.
Bonne compatibilité avec les navigateurs modernes.