Module 6 — le système flexible: mettre de l'ordre dans le chaos des divs

Archives CSS — Un cas d'alignement

Date de consignation : Nuit du 16 mars — Pluie fine sur l'écran

La mise en page, avant. Un bourbier. Des float qui lâchaient prise, des clearfix comme des rustines, du position: absolute qui fuyait dès qu'on clignait des yeux. On alignait au pif, au regret, à coup de margin: 0 auto et de prières.

Puis Flexbox est entré dans le bureau.

Pas un coup d'éclat. Une arrivée discrète, méthodique. Un inspecteur qui reprend un dossier bâclé. Son arme : la logique. Sa méthode : deux axes, des propriétés qui obéissent au doigt et à l'œil. Soudain, centrer verticalement ne demandait plus un pacte avec le diable. Juste align-items: center.

6.1 — LES DEUX AXES

Comprendre le terrain

Flexbox fonctionne avec deux axes. Comme dans une bonne enquête, tout dépend du point de vue.

• Axe principal (main axis)
  C'est lui qui commande. Il suit la flex-direction. Les éléments se rangent le long de cette ligne, dociles.

• Axe secondaire (cross axis)
  Perpendiculaire. L'axe de contrôle, celui qui vérifie l'alignement.

flex-direction: row (par défaut) :
→ Axe principal = horizontal (de gauche à droite)
→ Axe secondaire = vertical (de haut en bas)

flex-direction: column :
↓ Axe principal = vertical (de haut en bas)
→ Axe secondaire = horizontal (de gauche à droite)

Ne pas se tromper d'axe. C'est la première erreur. Celle qui coûte une heure de debug et trois cafés.

6.2 — ACTIVATION ET ORIENTATION

Mettre en place le dispositif

Pour lancer Flexbox, une seule instruction sur le parent :

.container {
  display: flex;  /* C'est parti. Les enfants se tiennent à carreau. */
}

▶ flex-direction

Définit l'orientation de l'axe principal.

flex-direction: row;           /* horizontal, gauche à droite */
flex-direction: row-reverse;   /* horizontal, droite à gauche */
flex-direction: column;        /* vertical, haut en bas */
flex-direction: column-reverse;/* vertical, bas en haut */

▶ flex-wrap

Les éléments doivent-ils rester en ligne ou peuvent-ils passer à la ligne ?

flex-wrap: nowrap;   /* par défaut. Tout le monde serré, coûte que coûte */
flex-wrap: wrap;     /* réaliste. Ils passent à la ligne si besoin */
flex-wrap: wrap-reverse; /* ligne du bas vers le haut. Pour déstabiliser. */

▶ flex-flow (raccourci)

Combine flex-direction et flex-wrap en une seule déclaration.

flex-flow: row wrap;   /* direction row, avec retour à la ligne */

6.3 — ALIGNEMENTS : LA PRÉCISION

Où placer les pièces sur l'échiquier

✔ justify-content

Contrôle l'alignement sur l'axe principal.

justify-content: flex-start;    /* groupé au début */
justify-content: flex-end;      /* groupé à la fin */
justify-content: center;        /* centré sur l'axe */
justify-content: space-between; /* premier et dernier collés aux bords, espace égal entre */
justify-content: space-around;  /* espace autour de chaque élément */
justify-content: space-evenly;  /* espace égal partout */

✔ align-items

Contrôle l'alignement sur l'axe secondaire (pour une seule ligne).

align-items: stretch;    /* par défaut. Étire pour remplir */
align-items: flex-start; /* aligne en haut/début */
align-items: flex-end;   /* aligne en bas/fin */
align-items: center;     /* centre parfait */
align-items: baseline;   /* aligne sur la ligne de texte */

✔ align-content

Contrôle l'alignement des lignes multiples sur l'axe secondaire.
⚠️ Ne fonctionne que si flex-wrap: wrap et qu'il y a plusieurs lignes.

align-content: flex-start;   /* lignes groupées en haut */
align-content: flex-end;     /* lignes groupées en bas */
align-content: center;       /* lignes centrées verticalement */
align-content: space-between;/* première et dernière lignes aux bords */
align-content: space-around; /* espace autour des lignes */
align-content: stretch;      /* étire les lignes pour occuper l'espace */

6.4 — LES ITEMS : GRANDIR, RÉTRÉCIR, ORDONNER

Chaque élément a son rôle, sa marge de manœuvre

Propriétés appliquées aux enfants directs.

▶ flex-grow

Facteur d'expansion. Détermine la part d'espace supplémentaire que l'item peut absorber.

.item { flex-grow: 1; }  /* Prend sa part de l'espace disponible */
.item { flex-grow: 2; }  /* Prend deux fois plus qu'un item à 1 */

▶ flex-shrink

Facteur de rétrécissement. Détermine comment l'item se comprime si l'espace manque.

.item { flex-shrink: 1; } /* Rétrécit si nécessaire (défaut) */
.item { flex-shrink: 0; } /* Ne rétrécit pas. Même serré. */

▶ flex-basis

Taille initiale avant que grow ou shrink n'interviennent.

.item { flex-basis: 200px; }  /* Taille de base de 200px */
.item { flex-basis: auto; }   /* Dépend du contenu (défaut) */
.item { flex-basis: 0; }      /* Part de zéro, tout est répartition */

▶ flex (raccourci)

Combine grow, shrink, basis dans cet ordre.

flex: 1 1 auto;   /* grow=1, shrink=1, basis=auto */
flex: 0 0 250px;  /* taille fixe de 250px, ni croissance ni rétrécissement */
flex: 1;           /* équivaut à flex: 1 1 0 */

▶ order

Change l'ordre visuel sans toucher au HTML. Valeur par défaut : 0.

.item-special { order: -1; } /* Passe devant les autres */
.item-last    { order: 10; } /* Recule */

▶ align-self (la pièce manquante)

Surcharge align-items pour un item spécifique.

.item-rebel {
  align-self: flex-end;   /* Cet item-là s'aligne en bas, les autres où tu veux */
}

6.5 — CAS PRATIQUES : SUR LE TERRAIN

🟦 SCÈNE 1 : LA NAVBAR

Alignement propre, sans histoire

<nav class="navbar">
  <div class="logo">LOGO</div>
  <ul class="links">
    <li>Accueil</li>
    <li>Produits</li>
    <li>Contact</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* Logo à gauche, liens à droite */
  align-items: center;            /* Centré verticalement */
  padding: 1rem;
}

.links {
  display: flex;                  /* Les li deviennent flex aussi */
  gap: 2rem;                      /* Espacement propre entre liens */
  list-style: none;
}

🟩 SCÈNE 2 : GRILLE SIMPLE RESPONSIVE

Wrap et flex-basis, l'équipe gagnante

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.grid-item {
  flex: 1 1 200px; /* Min 200px, grandit et rétrécit */
  background: #eee;
  padding: 1rem;
}

🟥 SCÈNE 3 : CARDS ADAPTATIVES

Avec clamp() pour la touche moderne

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.card {
  flex: 1 1 clamp(250px, 30%, 350px);
  padding: 1.5rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

6.6 — NOTES DE FIN D'ENQUÊTE

• Flexbox est unidirectionnel : une seule dimension à la fois (ligne OU colonne).
• Parent contrôle les enfants : presque tout se règle sur le container.
• Gap est ton ami : gap: valeur; espace les items sans margin compliquée.
• Mobile-first : avec flex-wrap et flex-basis, l'adaptatif devient naturel.
• Ne pas abuser de order : ça peut casser l'accessibilité (tab order ≠ ordre visuel).

Dernière lumière sur l'écran : 04:17.
Le container est aligné. Les items sont à leur place. La pluie a cessé.
Flexbox a fait son travail. Propre, silencieux, efficace.
Demain, ce sera un autre dossier. Grid, peut-être.
Mais pour ce soir, la mise en page est sous contrôle.

Fin du dossier Flexbox — Classé et archivé.