CSS Flexbox: The Complete Guide to Flexible Layout
Maîtrisez Flexbox pour créer des mises en page flexibles et responsives. De l’alignement au responsive, découvrez toutes les propriétés avec des exemples pratiques.
Objectifs pédagogiques
- Comprendre le système Flexbox
- Maîtriser l’alignement des éléments
- Créer des layouts responsives
- Résoudre les problèmes courants de mise en page
Flexbox est un modèle de mise en page unidimensionnel qui excelle pour distribuer l’espace et aligner les éléments.
Activation de Flexbox
.container {
display: flex;
}
Terminologie
- Conteneur flex : L’élément parent avec
display: flex - Éléments flex : Les enfants directs du conteneur
- Axe principal : Direction principale (row ou column)
- Axe transversal : Perpendiculaire à l’axe principal
Exemple de base
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
.container {
display: flex;
gap: 1rem;
}
.item {
padding: 1rem 2rem;
background: #0066cc;
color: white;
}
flex-direction
.container {
display: flex;
flex-direction: row; /* → (défaut) */
flex-direction: row-reverse; /* ↠*/
flex-direction: column; /* ↓ */
flex-direction: column-reverse; /* ↑ */
}
flex-wrap
.container {
display: flex;
flex-wrap: nowrap; /* Pas de retour à la ligne (défaut) */
flex-wrap: wrap; /* Retour à la ligne si nécessaire */
flex-wrap: wrap-reverse; /* Retour à la ligne inversé */
}
Raccourci flex-flow
.container {
flex-flow: row wrap;
/* équivalent à :
flex-direction: row;
flex-wrap: wrap;
*/
}
Exemple : Galerie responsive
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gallery-item {
flex: 1 1 200px; /* Minimum 200px, flexible */
}
justify-content
.container {
display: flex;
justify-content: flex-start; /* ↠Début (défaut) */
justify-content: flex-end; /* → Fin */
justify-content: center; /* ↔ Centre */
justify-content: space-between; /* Espacement entre */
justify-content: space-around; /* Espacement autour */
justify-content: space-evenly; /* Espacement égal */
}
Illustration visuelle
flex-start: [â– â– â– ]
flex-end: [ â– â– â– ]
center: [ â– â– â– ]
space-between: [â– â– â– ]
space-around: [ â– â– â– ]
space-evenly: [ â– â– â– ]
Exemple : Navbar
.navbar {
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
background: #333;
}
.navbar-logo {
/* À gauche automatiquement */
}
.navbar-menu {
display: flex;
gap: 2rem;
}
align-items
.container {
display: flex;
height: 200px;
align-items: stretch; /* Étirer (défaut) */
align-items: flex-start; /* Haut */
align-items: flex-end; /* Bas */
align-items: center; /* Centre vertical */
align-items: baseline; /* Ligne de base du texte */
}
align-self (par élément)
.item {
align-self: auto; /* Hérite du parent */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
}
align-content (multi-lignes)
.container {
display: flex;
flex-wrap: wrap;
height: 400px;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
}
Centrage parfait
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
flex-grow
.item {
flex-grow: 0; /* Ne pas grandir (défaut) */
flex-grow: 1; /* Prendre l'espace disponible */
flex-grow: 2; /* Prendre 2x plus que flex-grow: 1 */
}
flex-shrink
.item {
flex-shrink: 1; /* Peut rétrécir (défaut) */
flex-shrink: 0; /* Ne pas rétrécir */
}
flex-basis
.item {
flex-basis: auto; /* Taille intrinsèque */
flex-basis: 200px; /* Taille de base fixe */
flex-basis: 25{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}; /* Pourcentage */
}
Raccourci flex
.item {
flex: 1; /* flex: 1 1 0{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5} */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto */
flex: 0 0 200px; /* grow shrink basis */
}
Exemple : Colonnes égales
.row {
display: flex;
gap: 2rem;
}
.col {
flex: 1; /* Toutes les colonnes égales */
}
.col-sidebar {
flex: 0 0 250px; /* Sidebar fixe */
}
order
.item {
order: 0; /* Ordre par défaut (ordre du DOM) */
}
.item-first {
order: -1; /* Apparaît en premier */
}
.item-last {
order: 1; /* Apparaît en dernier */
}
gap
.container {
display: flex;
gap: 1rem; /* Espacement uniforme */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 1rem; /* Entre les lignes */
column-gap: 2rem; /* Entre les colonnes */
}
Exemple : Réorganisation responsive
.card-layout {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card-image {
order: 0;
}
.card-content {
order: 1;
}
@media (max-width: 768px) {
.card-image {
order: 1; /* Image après le texte sur mobile */
}
.card-content {
order: 0;
}
}
HTML
<div class="dashboard">
<aside class="sidebar">
<nav>Menu latéral</nav>
</aside>
<main class="main-content">
<header class="header">
<h1>Dashboard</h1>
<div class="user-menu">Profil</div>
</header>
<section class="cards">
<div class="card">Statistiques</div>
<div class="card">Graphiques</div>
<div class="card">Activités</div>
</section>
</main>
Full CSS
/* Layout principal */
.dashboard {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
flex: 0 0 250px;
background: #1a1a2e;
color: white;
padding: 2rem;
}
/* Contenu principal */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
background: #f5f5f5;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Grille de cartes */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 2rem;
}
.card {
flex: 1 1 300px;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Responsive */
@media (max-width: 768px) {
.dashboard {
flex-direction: column;
}
.sidebar {
flex: none;
order: -1;
}
}
