📐 Le cours : la mise en page sur un axe
Avant Flexbox, aligner des éléments demandait des contournements. display: flex règle en quelques lignes ce qui était pénible : centrer, répartir l'espace, mettre côte à côte, inverser l'ordre, s'adapter à la place disponible. Flexbox travaille sur une dimension à la fois (une ligne ou une colonne) ; pour une grille à deux dimensions, voir Grid.
Les deux axes
flex-direction: row (par défaut) axe principal →
┌──────┐ ┌──────┐ ┌──────┐
│ 1 │ │ 2 │ │ 3 │ ↕ axe secondaire
└──────┘ └──────┘ └──────┘
flex-direction: column axe principal ↓
┌──────────────┐
│ 1 │
├──────────────┤ ↔ axe secondaire
│ 2 │
└──────────────┘
justify-content agit toujours sur l'axe principal, align-items sur l'axe secondaire. Quand tu passes en column, les deux s'échangent : justify-content devient vertical.
Répartir sur l'axe principal : justify-content
flex-start |[1][2][3] |
center | [1][2][3] |
flex-end | [1][2][3]|
space-between |[1] [2] [3]|
space-around | [1] [2] [3] |
space-evenly | [1] [2] [3] |
Aligner sur l'axe secondaire : align-items
| Valeur | Effet (conteneur en ligne) |
|---|
stretch (défaut) | les éléments s'étirent sur toute la hauteur du conteneur |
flex-start | alignés en haut |
center | centrés verticalement |
flex-end | alignés en bas |
baseline | alignés sur la ligne de base de leur texte |
Schémas à connaître
Centrer un élément dans l'écran :
.centre {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Barre de navigation : logo à gauche, lien de connexion à droite. Une marge automatique absorbe tout l'espace libre et pousse l'élément à l'extrémité :
.navbar {
display: flex;
align-items: center;
gap: 1rem;
}
.navbar .connexion {
margin-left: auto;
}
Cartes qui passent à la ligne selon la place disponible :
.cartes {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.cartes > .carte {
flex: 1 1 16rem; /* grandit, rétrécit, base de 16rem */
}
Pied de page en bas de l'écran, même quand le contenu est court :
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* occupe toute la place restante */
}
flex : grow, shrink, basis
flex: <grow> <shrink> <basis> règle comment un élément partage la place. flex-basis est sa taille de départ, flex-grow sa part de l'espace libre quand il y en a, flex-shrink sa part de réduction quand il en manque.
| Écriture | Équivaut à | Effet |
|---|
flex: 1 | 1 1 0 | tous les éléments flex: 1 ont la même largeur, quel que soit leur contenu |
flex: auto | 1 1 auto | part de la taille du contenu, puis se partage l'espace libre |
flex: none | 0 0 auto | taille du contenu, ne bouge jamais |
flex: 0 0 200px | — | exactement 200 px |
Flexbox imbriqué
Un élément flex peut lui-même être un conteneur flex : c'est ainsi qu'on construit une carte (image à gauche, texte à droite, bouton en bas) dans une rangée de cartes. Chaque niveau résout une dimension.
Flexbox ou Grid ?
Flexbox est idéal quand c'est le contenu qui dicte la disposition (barres, boutons côte à côte, centrage, ligne d'étiquettes). Grid est préférable quand tu veux définir la grille d'ensemble de la page ou d'un composant, en lignes et en colonnes. Les deux se combinent très bien.
