outils et langages numériques

outils et langages numériques
flexible box layout ou flexbox

mis à jour en janvier 2026

La disposition des boîtes flexible (flexbox en anglais), a été conçue comme un outil de composition unidimensionnel qui permet de distribuer l'espace entre des objets d'une interface et de les aligner, de manière fluide (notamment pour s'adapter à tous types d'appareils et de tailles d'écran).
Cet article présente une méthode d'apprentissage structurée en six étapes clés pour gérer les éléments flexibles.
Précision pour faciliter la lecture : la nomenclature utilisée ci-dessous, pour identifier l'élément concerné par chacune des propriétés, est : p pour parent et e pour enfant⁥:

comprendre la hiérarchie parent versus enfant

Flexbox fonctionne impérativement sur un système hiérarchique à deux niveaux⁥:

Voici un exemple⁥:

côté html

<body>
<div class="flex-container">parent
<div class="flex-item">enfant 1</div>
<div class="flex-item">enfant 2</div>
<div class="flex-item">enfant 3</div>
</div>
</body>

côté css

.flex-container { /* le parent */
min-height: 100px;
display: flex; /* le parent devient flexible */
gap: 16px; /* espace autour des enfants */
font-size: 24px;
color: #a3808e;
background-color: #d5bac5;
padding: 15px;
}

.flex-item { /* l'enfant */
width: 80px;
display: flex; /* l'enfant devient flexible */
justify-content: center; /* le contenu de l'enfant est centré horizontalement */
align-items: center; /* le contenu de l'enfant est centré verticalement */
font-size: 18px;
color: #e0ebf1;
background-color: #7d94a2;
padding: 20px;
}

côté navigateur

parent
enfant
1
enfant
2
enfant
3

En pratique⁥: testez l'exemple de hiérarchie parent versus enfant, à manipuler en ligne…

gérer la direction principale - p

Vous pouvez agir sur le sens d’affichage horizontal ou vertical des éléments (les enfants - flex-item) du conteneur principal (le parent - flex-container) en convoquant la propriété flex-direction et les valeurs suivantes⁥:

Testez, ci-dessous, le changement du sens d'affichage des éléments flex-items (enfants) en fonction de la valeur choisie⁥:

côté navigateur

caniche
1
barbet
2
bouvier
3

Ci-dessous, le schéma, les nomenclatures des axes et les points de positionnement pour les enfants (flex-item) du parent (flex-container)⁥:

le principe du device pixel ratio

gérer l'alignement sur l'axe principal - p
[axe horizontal - main axis]

Après avoir défini l'axe principal d'affichage, vous pouvez utiliser la propriété justify-content pour caractériser le type d'alignement des éléments flexibles du conteneur selon cet axe. Plus précisément, cette propriété permet de définir de quelle manière doit être distribué l’espace restant dans le conteneur principal (le parent) et sera complétée par l'une des valeurs suivantes⁥:

Testez, ci-dessous, le changement d'alignement des éléments flex-items (enfants), sur l'axe principal, en fonction de la valeur choisie⁥:

côté navigateur

caniche
1
barbet
2
bouvier
3

gérer l'alignement sur l'axe secondaire - p
[axe vertical - cross axis]

Après avoir défini l'alignement des éléments flexibles sur l'axe principal (main axis - horizontal), vous pouvez utiliser la propriété align-items pour définir leur alignement selon l’axe secondaire (cross axis - vertical) complétée par l'une des valeurs suivantes⁥:

Testez, ci-dessous, le changement d'alignement des éléments flex-items (enfants), sur l'axe secondaire, en fonction de la valeur choisie⁥:

côté navigateur

caniche
1
barbet
2
bouvier
3

gérer le retour à la ligne - p

Si dans une composition, certains éléments flexibles dépassent du conteneur, la possibilité de les renvoyer à la ligne et de définir leur direction selon l’axe secondaire est possible en utilisant la propriété flex-wrap. Cette propriété sera complétée par l'une des valeurs suivantes⁥:

Testez, ci-dessous, le changement de composition des éléments flex-items (enfants) en fonction de la valeur choisie (ici, pour permettre le retour à la ligne, le conteneur a une largeur déterminée de 500 pixels)⁥:

côté navigateur

caniche
1
barbet
2
bouvier
3
teckel
4
pékinois
5
épagneul
6

connaître les propriétés complémentaires - e

Les éléments enfants (flex-item) qui n’occupent initialement que la taille minimale de leur contenu, peuvent aussi avoir des propriétés spécifiques pour contrôler leurs comportements comme flew-grow, flex-shrink, flex-basis, flex, order, align-self.
Leurs actions sont décrites ici⁥:

1 - flex-grow⁥: c'est le facteur d'expansion d'un élément flexible qui définit la capacité d'un élément enfant à s'étendre, si nécessaire, en fonction⁥:
- de l'espace disponible sur l'axe principal et
- de la valeur de flex-grow des autres éléments flexibles qui sont sur le même axe principal.
La valeur doit être un nombre, et la valeur par défaut est 0.
En pratique⁥: testez l'exemple flex-grow, à manipuler en ligne et en redimensionnant la fenêtre du navigateur…

2 - flex-shrink⁥: c'est le facteur de rétrécissement d'un élément flexible dans le cas où il n'y a pas assez de place pour les éléments flexibles sur l'axe principal lors du redimensionnement du conteneur.
La valeur doit être un nombre, et la valeur par défaut est 1.
En pratique⁥: testez l'exemple flex-shrink, à manipuler en ligne et en redimensionnant la fenêtre du navigateur…

3 - flex-basis: c'est la taille initiale des éléments flexibles qui détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. La valeur peut s'exprimer en pourcentage, en pixels, par son contenu (content).
La valeur par défaut est auto.

4 - flex⁥: c'est la propriété raccourcie qui regroupe les trois propriétés précédentes flex-grow, flex-shrink et flex-basis (attention à ne pas confondre l'utilisation de ce terme flex pour la propriété - comme ici - ou pour la valeur - display: flex;). Un exemple d'application⁥:

côté css

.flex-item {
flex-grow: 1; /* l'enfant s'expansera - valeur par défaut = 0 */
flex-shrink: 2; /* l'enfant se rétrécira - valeur par défaut = 1 */
flex-basis: 200px; /* la taille initiale de l'enfant sera de 200 pixels */
}

…dans sa forme raccourcie, cette déclaration peut s'écrire aussi⁥:

.flex-item {
flex: 1 2 200px;
}

En pratique⁥: testez l'exemple flex-flow, à manipuler en ligne…

5 - order⁥: c'est la propriété qui permet de choisir l’ordre d’affichage et de pouvoir réordonner à sa guise les éléments dans le conteneur flexible. Par défaut, les éléments flexibles sont disposés selon l'ordre du code source.
En pratique⁥: testez l'exemple order, à manipuler en ligne en modifiant les valeurs pour les trois éléments colorés…

6 - align-self⁥: c'est la propriété  rebelle  qui permet à un enfant (flex-item) de désobéir à la règle d'alignement fixée par le parent et de se distinguer de ses frères (et⁥/⁥ou sœurs). Les valeurs de cette propriété sont identiques à celles de align-items⁥: stretch, flex-start, center, flex-end et baseline. Retenons que⁥: align-items (sur le parent) c'est la loi générale et que align-self (sur l'enfant) c'est l'exception individuelle.
En pratique⁥: testez l'exemple align-self, à manipuler en ligne…

7 - flex-flow⁥: c'est la propriété raccourcie qui regroupe les deux propriétés flex-direction et flex-wrap qui ensemble définissent les axes  main  et  cross  du conteneur flexible.
Rappel sur les valeurs potentielles, pour flex-direction⁢: row / row-reverse / column / column-reverse; pour flex-wrap⁢: nowrap / wrap / wrap-reverse. La valeur par défaut est row nowrap⁥:

côté css

.flex-container {
flex-direction: row; /* aligné dans l'axe horizontal */
flex-wrap: wrap; /* avec un retour à la ligne */
}

…dans sa forme raccourcie, cette déclaration peut s'écrire aussi⁥:

.flex-container {
flex-flow: row wrap;
}

En pratique⁥: testez l'exemple flex, à manipuler en ligne…

8 - align-content⁥: c'est la propriété qui définit la façon dont l'espace est réparti entre et autour les éléments flexibles (flex-items) lorsqu'il y a plusieurs lignes (c'est-à-dire quand flex-wrap:wrap est actif). Cette propriété agit sur l'axe perpendiculaire (cross-axis - vertical) à l'axe principal.

Testez, ci-dessous, le changement de composition des éléments flex-items (enfants) en fonction de la valeur choisie (ici, pour permettre le retour à la ligne, le conteneur a une largeur déterminée de 500 pixels)⁥:

côté navigateur

caniche
1
barbet
2
bouvier
3
teckel
4
pékinois
5
épagneul
6
beagle
7
chihuahua
8
husky
9

9 - gap⁥: c'est la propriété raccourcie qui regroupe les deux propriétés row-gap et column-gap qui spécifie la taille des gouttières, c'est-à-dire l'espace entre les lignes et les colonnes dans les mises en page⁥:

côté css

.flex-container {
row-gap: 30px;
column-gap: 20px;
}

…dans sa forme raccourcie, cette déclaration peut s'écrire aussi⁥:

.flex-container {
gap: 30px 20px;
}

En pratique⁥: testez l'exemple gap, à manipuler en ligne…

quelques exercices d'application

Pour apprendre, rien ne vaut la mise en pratique. Voici deux cas d'école⁥:

1 - Centrer un élément parfaitement⁥:

côté html

<div class="flex-conteneur"> /* l'élément parent */
<div class="flex-item">caniche</div> /* l'élément enfant à centrer */
</div>

côté css

.flex-conteneur {
display: flex; /* active le mode flexbox */
justify-content: center; /* centre horizontalement le carré */
align-items: center; /* centre verticalement le carré */
height: 240px; /* nécessaire pour voir le centrage vertical */
}

.flex-item {
width: 80px;
height: 80px;
display: flex; /* active le mode flexbox */
justify-content: center; /* centre horizontalement le mot caniche */
align-items: center; /* centre verticalement le mot caniche */
padding: 20px;
}

côté navigateur

caniche

En pratique⁥: testez l'exemple de centrage parfait, à manipuler en ligne…

2 - Une barre de navigation responsive⁥:

côté html

<div class="navbar">
<div class="navbar-left">le titre</div>
<div class="navbar-right">
<div class="navbar-item">le portfolio</div>
<div class="navbar-item">le mémoire</div>
<div class="navbar-item">le projet</div>
</div>
</div>

côté css

.navbar {
display: flex; /* active le mode flexbox */
justify-content: space-between; /* espacement réparti entre les enfants navbar-left et navbar-right */
align-items: center; /* centre verticalement les enfants navbar-left et navbar-right */
flex-wrap: wrap; /* retour à la ligne si nécessaire */
gap: 50px; /* gouttière de 50 pixels entre les enfants navbar-left et navbar-right */
background-color: #d5bac5;
padding: 20px;
}

.navbar-left {
font-size: 1.6rem;
}

.navbar-right {
display: flex; /* active le mode flexbox */
gap: 30px; /* gouttière de 30 pixels entre les éléments navbar-item */
flex-wrap: wrap; /* retour à la ligne si nécessaire */
}

.navbar-item {
font-size: 1.2rem;
cursor: pointer;
}

côté navigateur

le titre
le portfolio
le mémoire
le projet

En pratique⁥: testez l'exemple de la barre de navigation responsive, à manipuler en ligne…

3 - Créer une  card  de profil⁥: