Centrer verticalement un élément en CSS a longtemps été une plaisanterie récurrente chez les développeurs, tant les solutions de contournement (tableaux détournés, positionnement absolu bricolé) étaient laborieuses. Ce modèle de mise en page a réglé le problème en quelques propriétés, au point de devenir l’un des outils les plus utilisés du langage.
Un conteneur, des éléments flexibles
Tout commence par display: flex sur un conteneur, qui transforme automatiquement ses enfants directs en éléments flexibles alignés sur un axe. Les propriétés justify-content et align-items gèrent respectivement l’alignement le long de cet axe et perpendiculairement à lui, tandis que flex-grow, flex-shrink et flex-basis contrôlent, sur chaque élément, sa capacité à s’étirer ou se rétracter selon l’espace disponible.
Exemple
.barre-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
À ne pas confondre avec la grille CSS
- Ce modèle raisonne sur un seul axe à la fois : pour une mise en page à deux dimensions (lignes et colonnes simultanément), la grille CSS reste généralement plus adaptée et plus lisible.
- Dans un thème WordPress à blocs, le bloc natif « Colonnes » repose directement sur ce modèle pour répartir son contenu, avec des largeurs proportionnelles définies via
flex-basisen pourcentage.
Bon à savoir : la propriété raccourcie gap, longtemps réservée à la grille CSS, fonctionne aujourd’hui aussi avec ce modèle dans tous les navigateurs modernes, évitant les marges négatives autrefois nécessaires pour espacer les éléments.