Flexbox

Ce que tu vas apprendre

• Mettre des éléments côte à côte avec display: flex.
• Les répartir et les aligner avec justify-content et align-items.
• Laisser les éléments grandir, rétrécir et passer à la ligne.

Éléments côte à côte

Par défaut, une liste de cartes de recettes s'empile verticalement. Voici le HTML :

<ul class="recettes">
  <li>Tarte aux pommes</li>
  <li>Soupe de potiron</li>
  <li>Crêpes</li>
</ul>

Une seule déclaration les place en rangée :

.recettes {
  display: flex;
  gap: 1rem;
}

Flexbox est un mode de disposition pensé pour répartir des éléments dans une seule direction, ligne ou colonne. L'élément avec display: flex est le conteneur flex. Ses enfants directs deviennent des éléments flex.

gap ajoute un espace fixe entre les éléments. C'est plus propre que des marges.

Les deux axes

Un conteneur flex a deux axes :

• l'axe principal, celui dans lequel les éléments se suivent (horizontal par défaut) ;
• l'axe secondaire, perpendiculaire.

La propriété flex-direction choisit l'axe principal :

Retiens bien ces deux axes : justify-content agit sur l'axe principal, align-items sur l'axe secondaire. Quand tu passes en column, les deux s'inversent.

Répartir sur l'axe principal

.entete {
  display: flex;
  justify-content: space-between;
}

Avec ce réglage, le premier élément va au début, le dernier à la fin, et l'espace libre se répartit entre eux. Idéal pour un logo à gauche et un menu à droite.

Aligner sur l'axe secondaire

.entete {
  display: flex;
  align-items: center;
}

align-items: center centre les éléments verticalement dans la hauteur du conteneur. Les autres valeurs courantes sont flex-start, flex-end et stretch (le défaut : les éléments s'étirent pour remplir la hauteur).

Passer à la ligne

Par défaut, les éléments restent sur une seule ligne, quitte à se serrer. flex-wrap: wrap autorise le retour à la ligne :

.recettes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Tu obtiens une grille souple : quand la place manque, les cartes descendent à la ligne suivante.

Faire grandir les éléments

La propriété flex règle la façon dont chaque élément partage l'espace. Voici sa forme la plus utile :

.recettes li {
  flex: 1 1 12rem;
}

Les trois valeurs se lisent ainsi :

1. flex-grow (1) : l'élément peut grandir pour occuper l'espace libre ;
2. flex-shrink (1) : il peut rétrécir si la place manque ;
3. flex-basis (12rem) : sa taille de départ avant répartition.

Avec flex: 1 1 12rem et flex-wrap: wrap, chaque carte fait au moins environ 12rem et les cartes d'une ligne se partagent la largeur à parts égales.

Pour un élément en particulier, align-self remplace l'alignement du conteneur. order change sa position sans toucher au HTML.

Un exemple complet : un en-tête

<header class="entete">
  <a href="/" class="logo">Recettes</a>
  <nav class="menu">
    <a href="/recettes">Toutes</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.menu {
  display: flex;
  gap: 1rem;
}

Le .entete répartit logo et menu. Le .menu est lui-même un conteneur flex : on peut imbriquer autant de conteneurs que nécessaire.

À retenir

• display: flex sur un parent aligne ses enfants directs en ligne ou en colonne.
• flex-direction définit l'axe principal ; justify-content agit dessus, align-items agit sur l'axe secondaire.
• gap crée un espace régulier entre les éléments.
• flex-wrap: wrap autorise le retour à la ligne.
• flex: 1 1 12rem combine croissance, rétrécissement et taille de départ.
• On peut imbriquer des conteneurs flex dans d'autres.