Maîtriser Flexbox en CSS

Flexbox (Flexible Box Layout) est un modèle de mise en page CSS qui permet de concevoir des structures responsives et flexibles sans utiliser de float ou de positionnement. C’est un outil puissant pour aligner et distribuer l’espace entre les éléments dans un conteneur.

Concepts de base

Flexbox fonctionne avec deux types d’éléments :

• Le conteneur flex (parent)
• Les éléments flex (enfants)

Création d’un conteneur flex

Pour créer un conteneur flex, utilisez la propriété display avec la valeur flex ou inline-flex :

.container {
  display: flex; /* ou inline-flex */
}

Propriétés du conteneur flex

Direction des éléments

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (défaut) : de gauche à droite
• row-reverse : de droite à gauche
• column : de haut en bas
• column-reverse : de bas en haut

Retour à la ligne

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (défaut) : tous les éléments sur une seule ligne
• wrap : les éléments passent à la ligne suivante si nécessaire
• wrap-reverse : les éléments passent à la ligne précédente si nécessaire

Raccourci flex-flow

.container {
  flex-flow: row nowrap; /* flex-direction et flex-wrap combinés */
}

Alignement horizontal (justify-content)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (défaut) : éléments alignés au début
• flex-end : éléments alignés à la fin
• center : éléments centrés
• space-between : espace égal entre les éléments
• space-around : espace égal autour des éléments
• space-evenly : espace égal entre et autour des éléments

Alignement vertical (align-items)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch (défaut) : étire les éléments pour remplir le conteneur
• flex-start : éléments alignés en haut
• flex-end : éléments alignés en bas
• center : éléments centrés verticalement
• baseline : éléments alignés sur leur ligne de base

Alignement des lignes (align-content)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Cette propriété n’a d’effet que lorsqu’il y a plusieurs lignes d’éléments.

Propriétés des éléments flex

Ordre

.item {
  order: 0; /* défaut */
}

Plus la valeur est élevée, plus l’élément apparaît tard dans l’ordre.

Flexibilité (flex-grow, flex-shrink, flex-basis)

.item {
  flex-grow: 0; /* défaut */
  flex-shrink: 1; /* défaut */
  flex-basis: auto; /* défaut */
}

• flex-grow : capacité d’un élément à grandir
• flex-shrink : capacité d’un élément à rétrécir
• flex-basis : taille par défaut d’un élément

Raccourci flex

.item {
  flex: 0 1 auto; /* flex-grow, flex-shrink et flex-basis combinés */
}

Alignement individuel

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Cette propriété permet de remplacer l’alignement défini par align-items pour un élément spécifique.

Exemple pratique

Voici un exemple de mise en page avec Flexbox :

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

Cas d’utilisation courants

1. Centrage parfait (horizontal et vertical) :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Navigation responsive :

nav {
  display: flex;
  flex-wrap: wrap;
}

nav a {
  flex: 1 1 100px;
}

3. Grille flexible :

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 1 300px;
  margin: 10px;
}

Conclusion

Flexbox est un outil puissant pour créer des mises en page flexibles et responsives. Il simplifie considérablement de nombreux défis de mise en page qui étaient difficiles à résoudre avec les méthodes traditionnelles comme les floats et le positionnement.

Pour approfondir vos connaissances sur Flexbox, je vous recommande d’explorer le guide complet sur MDN et de pratiquer avec des outils interactifs comme Flexbox Froggy.