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>
</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-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%; /* Pourcentage */
}

Raccourci flex

.item {
flex: 1; /* flex: 1 1 0% */
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-sidebar {
flex: 0 0 250px; /* Sidebar fixe */
}

order

.item {
order: 0; /* Ordre par défaut (ordre du DOM) */
}

.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-content {
order: 0;
}
}

HTML

<div class="dashboard">
<aside class="sidebar">
<nav>Menu latéral</nav>
</aside>

<section class="cards">
<div class="card">Statistiques</div>
<div class="card">Graphiques</div>
<div class="card">Activités</div>
</section>
</main>
</div>

CSS Complet

/* Layout principal */
.dashboard {
display: flex;
min-height: 100vh;
}

.sidebar {
flex: none;
order: -1;
}
}