Flexbox range des éléments sur une ligne, ou sur une colonne, et répartit l’espace entre eux. Trois propriétés suffisent à couvrir la moitié des mises en page d’un site.
Avant Flexbox, centrer un élément verticalement demandait un calcul et deux propriétés de positionnement. Depuis, cela demande deux déclarations.
css
position: absolute;
top: 50%;
transform: translateY(-50%);Complexe et fragile
css
float: left;
width: 33.333%;
/* + clearfix hack */Calculs et bricolages
css
display: flex;
justify-content: center;
align-items: center;Simple et lisible
css
display: flex;
gap: 1rem;
/* Items: flex: 1 */Équilibrées d’elles-mêmes
Quatre propriétés se posent sur le conteneur, et gouvernent tous ses enfants d’un coup.
Une seule déclaration transforme un élément en conteneur flex. Ses enfants directs se rangent alors sur une ligne, au lieu de s’empiler.
css
/* Activation de Flexbox */
.container {
display: flex;
}
/* Alternative inline */
.container-inline {
display: inline-flex;
}justify-content
justify-content: ;
justify-content répartit les éléments le long de l’axe principal — horizontalement, tant que flex-direction vaut row.
align-items
align-items: ;
align-items gouverne l’axe transversal. La valeur stretch, par défaut, étire les éléments sur toute la hauteur du conteneur.
flex-direction
flex-direction: ;
flex-direction échange les deux axes. En column, c’est justify-content qui gouverne la verticale, et align-items l’horizontale.
gap définit l’espace entre les éléments, et seulement entre eux. Aucun espace ne traîne au début ni à la fin.
css
gap: 1rem; /* Même espacement partout */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;gap
gap: ;
Les libellés donnent l’équivalent en pixels ; la déclaration, elle, s’écrit en rem — une unité qui suit la taille de texte choisie par le lecteur.
flex-direction
flex-direction: ;
Le même gap sépare les colonnes en row, et les lignes en column. Une seule déclaration couvre les deux cas.
css
gap: 10px; /* Pixels */
gap: 1cm; /* Centimètres */
gap: 12pt; /* Points */css
gap: 1rem; /* Root em */
gap: 2em; /* Element em */
gap: 5%; /* Pourcentage */css
gap: 2vw; /* Viewport width */
gap: 1vh; /* Viewport height */
gap: 1vmin; /* Plus petit des deux */rem est le choix par défaut : il suit la taille de texte choisie par le lecteur, ce que px ignore. Réservez px aux traits fins — une bordure, un séparateur — et les unités de fenêtre aux espacements qui doivent respirer avec l’écran.
css
/* Espacement différencié */
.container {
display: flex;
flex-wrap: wrap;
row-gap: 2rem; /* Vertical */
column-gap: 1rem; /* Horizontal */
}
/* Équivalent raccourci */
gap: 2rem 1rem; /* row column */Les deux cas où gap remplace le plus souvent une série de marges.
css
.toolbar {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
background: #f8f9fa;
}css
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Une seule propriété CSS au lieu de multiples marges
Changement global d’espacement en un seul endroit
Pas d’espacement sur les bords extérieurs
Les mêmes trois propriétés, appliquées à ce qu’on rencontre sur presque tous les sites.
Centrer horizontalement et verticalement a longtemps été le problème le plus cité du CSS. Trois déclarations le règlent.
css
/* Le Saint Graal du CSS */
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Une marque à gauche, un menu à droite, le tout aligné verticalement : c’est space-between plus align-items.
css
/* Navigation principale */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav-menu {
display: flex;
gap: 2rem;
}flex-wrap autorise le retour à la ligne, et la notation flex: 1 1 300px donne à chaque carte une largeur de départ qu’elle peut dépasser ou réduire.
css
/* Container des cards */
.cards-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* Cards individuelles */
.card {
flex: 1 1 300px;
background: white;
border-radius: 8px;
padding: 1rem;
}html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Admin - Exercice Flexbox</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
/* TODO: Ajouter display: flex et flex-direction */
}
.header {
background: #217cba;
color: white;
padding: 1rem;
/* TODO: Faire une navigation horizontale avec flexbox */
}
.main-layout {
/* TODO: Container flex horizontal pour sidebar + contenu */
}
.sidebar {
background: #9b59b6;
color: white;
width: 250px;
padding: 1rem;
/* TODO: Faire un menu vertical avec flexbox */
}
.content {
flex: 1;
padding: 1rem;
}
.widgets {
/* TODO: Grille de widgets responsive avec flexbox */
}
.widget {
background: #ecf0f1;
padding: 1rem;
border-radius: 8px;
min-height: 150px;
/* TODO: Centrer le contenu */
}
</style>
</head>
<body>
<header class="header">
<div class="logo">Dashboard</div>
<nav>
<a href="#">Accueil</a>
<a href="#">Utilisateurs</a>
<a href="#">Paramètres</a>
</nav>
</header>
<div class="main-layout">
<aside class="sidebar">Menu</aside>
<main class="content">
<div class="widgets">
<div class="widget">Widget 1</div>
<div class="widget">Widget 2</div>
<div class="widget">Widget 3</div>
</div>
</main>
</div>
</body>
</html>Chaque TODO marque une déclaration à écrire. Il y en a six : traitez-les de haut en bas, en rechargeant la page à chaque fois.
Vous savez ranger des éléments sur une ligne ou une colonne, les aligner et les espacer. La suite du parcours ajoute la deuxième dimension avec CSS Grid.