CSS — Flexbox

Pendant longtemps, aligner et répartir des éléments en CSS relevait du bricolage : float, marges négatives, astuces diverses. Flexbox a changé la donne en offrant un système d’alignement pensé pour ça. C’est aujourd’hui l’outil de référence pour disposer des composants — barres de navigation, cartes, boutons — et le premier réflexe pour centrer quoi que ce soit.

Qu’est-ce que Flexbox ?

Définition : Flexbox

Flexbox (Flexible Box Layout) est un système de mise en page unidimensionnel : il dispose des éléments selon une seule direction à la fois, soit en ligne (horizontalement), soit en colonne (verticalement), tout en gérant automatiquement leur alignement et la répartition de l’espace disponible.

Concrètement, Flexbox vous apporte un alignement facile (horizontal comme vertical), une distribution automatique de l’espace entre les éléments, la possibilité d’en changer l’ordre, et une adaptation naturelle aux différentes tailles d’écran. C’est beaucoup, pour très peu de code.

Les deux acteurs : container et items

Flexbox met en scène deux rôles complémentaires.

Élément	Rôle
Flex container	Le parent, sur lequel on applique display: flex
Flex items	Les enfants directs du container

<div class="container">    
    <div>Item 1</div>      
    <div>Item 2</div>      
    <div>Item 3</div>      
</div>

.container {
    display: flex;
}

Cette unique déclaration display: flex suffit à démarrer. Effet immédiat : les enfants se placent côte à côte, gardent leur largeur naturelle, et s’étirent à la même hauteur. Tout le reste consiste à affiner ce comportement.

Les axes de Flexbox

Pour comprendre Flexbox, il faut visualiser ses deux axes.

┌──────────────────────────────────────┐
│          Main Axis (axe principal)   │
│          ←─────────────────→         │
│   ↑                                  │
│   │      ┌───┐  ┌───┐  ┌───┐         │
│ Cross    │ 1 │  │ 2 │  │ 3 │         │
│  Axis    └───┘  └───┘  └───┘         │
│   │                                  │
│   ↓                                  │
└──────────────────────────────────────┘

L”axe principal (main axis) est la direction dans laquelle s’alignent les items — horizontale par défaut. L”axe perpendiculaire (cross axis) lui est, comme son nom l’indique, perpendiculaire. Cette distinction est la clé de tout : les propriétés Flexbox agissent toujours par rapport à ces axes. justify-content travaille sur l’axe principal, align-items sur l’axe perpendiculaire. Comprendre les axes, c’est comprendre Flexbox.

Les propriétés du container

Cinq propriétés couvrent l’essentiel des besoins.

Propriété	Effet
flex-direction	Direction de l’axe principal
justify-content	Alignement sur l’axe principal
align-items	Alignement sur l’axe perpendiculaire
flex-wrap	Retour à la ligne
gap	Espacement entre items

flex-direction

Cette propriété fixe la direction de l’axe principal, donc le sens dans lequel s’enchaînent les items.

Valeur	Effet
row	Horizontal, de gauche à droite (défaut)
row-reverse	Horizontal, de droite à gauche
column	Vertical, de haut en bas
column-reverse	Vertical, de bas en haut

Passer de row à column bascule toute la disposition : avec row on obtient [1] [2] [3], avec column les items s’empilent verticalement. Notez qu’en changeant la direction, on échange aussi le rôle des deux axes — ce qui était horizontal devient vertical.

justify-content

justify-content répartit l’espace le long de l’axe principal.

.container {
    display: flex;
    justify-content: flex-start; /* Défaut */
}

Les valeurs les plus utiles, illustrées sur trois items :

• flex-start — tout au début : [1][2][3]        

• center — au centre :    [1][2][3]   

• flex-end — tout à la fin

• space-between — espace réparti entre les items, sans marge aux bords : [1]     [2]     [3]

• space-around — espace réparti autour de chaque item : [1]   [2]   [3]

space-between est probablement la plus employée : c’est elle qui place un logo à gauche et un menu à droite d’une barre de navigation.

align-items

align-items aligne les items sur l’axe perpendiculaire.

.container {
    display: flex;
    align-items: stretch; /* Défaut */
}

Valeurs courantes : stretch (les items s’étirent pour remplir la hauteur — c’est le défaut), flex-start (en haut), center (centrés verticalement), flex-end (en bas). C’est align-items: center qui assure l’alignement vertical impeccable d’une barre de navigation, par exemple.

flex-wrap

Par défaut, Flexbox tasse tous les items sur une seule ligne, quitte à les rétrécir. flex-wrap: wrap les autorise à passer à la ligne quand la place manque.

Valeur	Effet
nowrap	Tous sur une ligne (défaut)
wrap	Retour à la ligne si nécessaire

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    width: 200px;
}

Le résultat s’adapte tout seul à la largeur disponible : trois items par ligne dans un container large, deux dans un container plus étroit. C’est la base des grilles flexibles.

gap

gap définit l’espacement entre les items, sans toucher aux bords.

.container {
    display: flex;
    gap: 20px;
}

C’est nettement plus pratique que les marges : un seul endroit à régler, et pas d’espace parasite au bord du container. Là où l’on écrivait autrefois margin-right: 20px sur chaque item (avec le problème de la marge en trop sur le dernier), gap règle tout proprement.

Les propriétés des items

Les items peuvent aussi porter leurs propres propriétés, principalement pour décider comment ils occupent l’espace.

Propriété	Effet
flex-grow	Capacité à grandir
flex-shrink	Capacité à rétrécir
flex-basis	Taille de base
flex	Raccourci des trois précédentes

En pratique, on manipule surtout le raccourci flex.

flex: 1

flex: 1 demande à l’item de prendre tout l’espace disponible.

.item {
    flex: 1;
}

Si tous les items ont flex: 1, ils se partagent l’espace équitablement. Si un seul l’a, il absorbe tout l’espace restant après que les autres ont pris leur taille naturelle. C’est l’outil idéal pour qu’une zone de contenu occupe « le reste » à côté d’un élément de taille fixe.

Items de taille fixe

À l’inverse, on fige une taille avec la forme longue de flex :

.item-fixed {
    flex: 0 0 200px;
}

Les trois valeurs se lisent : 0 (ne grandit pas), 0 (ne rétrécit pas), 200px (taille de base). Résultat : un item rigoureusement à 200px, quoi qu’il arrive. Parfait pour une barre latérale.

Cas d’usage pratiques

Rien ne vaut des exemples concrets pour ancrer ces propriétés. Voici les situations que vous rencontrerez le plus souvent.

Le centrage parfait

Centrer un élément, horizontalement et verticalement, tenait autrefois de l’épreuve. Avec Flexbox, c’est trois lignes :

.container {
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center;     /* Vertical */
    height: 400px;
}

Une barre de navigation

Logo à gauche, menu à droite, le tout aligné verticalement :

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.menu {
    display: flex;
    gap: 20px;
    list-style: none;
}

Un layout en colonnes

Une barre latérale de largeur fixe, un contenu qui prend le reste :

.container {
    display: flex;
    gap: 20px;
}

.sidebar {
    flex: 0 0 250px; /* Largeur fixe */
}

.content {
    flex: 1; /* Prend le reste */
}

Des cartes responsives

Des cartes qui se réorganisent selon la largeur, avec une taille minimale garantie :

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 250px; /* Au moins 250px, peut grandir */
}

Un pied de page collé en bas

Une disposition qui plaque le footer en bas de la fenêtre même quand le contenu est court :

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Pousse le footer vers le bas */
}

Des colonnes de même hauteur

Comme align-items vaut stretch par défaut, des boîtes côte à côte adoptent automatiquement la même hauteur, alignée sur la plus haute :

.container {
    display: flex;
}

.box {
    flex: 1;
    padding: 20px;
}

Exercice : une carte horizontale

Objectif : une carte avec l’image à gauche et le contenu à droite.

<div class="card">
    <img src="image.jpg" alt="Photo">
    <div class="card-content">
        <h3>Titre</h3>
        <p>Description...</p>
        <button>Lire plus</button>
    </div>
</div>

Essayez de la composer avant de regarder la solution. L’idée : un Flexbox horizontal pour aligner image et contenu, et un second Flexbox vertical à l’intérieur du contenu.

.card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
}

.card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Notez object-fit: cover sur l’image : il garantit qu’elle remplit son cadre de 200×200 sans se déformer, en recadrant l’excédent.

En résumé

Pour démarrer avec Flexbox, cinq gestes suffisent : display: flex sur le container, puis flex-direction pour la direction, justify-content pour répartir sur l’axe principal, align-items pour aligner sur l’axe perpendiculaire, et gap pour espacer. Sur les items, flex: 1 pour prendre l’espace disponible et flex: 0 0 200px pour une taille fixe.

Flexbox excelle pour les barres de navigation, les composants alignés, le centrage et la distribution d’espace en une dimension. Pour des grilles complexes en deux dimensions — lignes et colonnes à la fois — c’est CSS Grid qu’on emploiera, et qui fait l’objet du chapitre suivant.