Flexbox permet d'aligner et de répartir des éléments beaucoup plus facilement qu'avec les anciennes techniques de mise en page. Dans ce cours, nous allons voir comment fonctionne ce système et comment utiliser les principales propriétés du container et des items.
Pourquoi utiliser flex plutôt que float
Pendant longtemps, on a utilisé float pour placer plusieurs blocs sur une même ligne. Cette technique a rendu service, mais elle n'a pas été pensée au départ pour construire des mises en page complètes.
Avec float, il faut souvent ajouter des corrections avec clear, surveiller les largeurs et gérer des comportements parfois peu intuitifs. Avec Flexbox, le navigateur comprend tout de suite qu'on veut organiser plusieurs éléments dans une ligne ou dans une colonne.
Il faut bien comprendre ce décalage : float a surtout été imaginé pour faire flotter un élément dans le texte, par exemple une image alignée à gauche avec un paragraphe qui vient s'enrouler autour. Ce n'était pas, à l'origine, un véritable système de construction de layout.
Quand on détourne float pour fabriquer des colonnes ou aligner plusieurs blocs, on obtient parfois le résultat attendu, mais au prix de plusieurs contraintes. Il faut penser aux largeurs, éviter que certains éléments ne remontent de manière inattendue et ajouter des règles de nettoyage pour retrouver une structure stable.
Flexbox change complètement l'approche. Ici, on ne ruse plus avec une propriété prévue pour un autre usage. On dit simplement au navigateur : cet élément parent devient un container flexible, et ses enfants doivent être organisés selon des règles de placement précises.
Cela apporte plusieurs avantages très concrets. On peut facilement mettre des éléments sur une ligne ou dans une colonne, répartir l'espace libre, centrer des blocs, changer leur ordre visuel ou autoriser un retour à la ligne, tout cela avec des propriétés prévues spécialement pour ce travail.
Autrement dit, avec float, on forçait souvent une mise en page à partir d'un outil imparfait pour cet usage. Avec Flexbox, on utilise un système pensé dès le départ pour organiser des blocs. Le code est donc en général plus clair, plus souple et plus simple à faire évoluer.
Introduction au système flex
Flexbox est un système de layout CSS. Le mot layout désigne la manière dont les éléments se placent les uns par rapport aux autres dans la page.
Le principe de base est simple : on prend un élément parent, on lui applique display: flex;, puis ses enfants directs deviennent des éléments flexibles qui peuvent se répartir dans l'espace disponible.
<div class="liste">
<div>Bloc 1</div>
<div>Bloc 2</div>
<div>Bloc 3</div>
</div>
.liste{
display: flex;
}
Par défaut, les éléments se placent sur une ligne. À première vue, cela ressemble beaucoup au comportement d'éléments en inline. Mais vous allez le voir, Flexbox est beaucoup plus puissant. Ensuite, plusieurs propriétés permettent de changer leur direction, leur taille, leur ordre ou leur alignement.
La différence entre le flex container et le flex item
Pour comprendre Flexbox, il faut distinguer deux rôles.
-
Le flex container est l'élément parent qui reçoit
display: flex;. - Les flex items sont ses enfants directs.
Cette différence est très importante, car certaines propriétés s'appliquent au container, alors que d'autres s'appliquent aux items.
Ici, le cadre pointillé représente le container. Les trois blocs colorés sont les items. Quand vous réglez l'espacement global ou l'alignement de tout le groupe, vous agissez généralement sur le container. Quand vous changez le comportement d'un seul bloc, vous agissez sur un item.
Les propriétés du container
La propriété display
La première propriété à connaître est display. C'est elle qui active Flexbox.
Pour bien voir la différence, observons les deux valeurs les plus utiles.
Valeur flex
Avec cette valeur, le container devient un bloc flex qui occupe toute la largeur disponible comme un élément de type bloc classique.
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.container{
display: flex;
gap: 10px;
}
Valeur inline-flex
Avec cette valeur, le container devient flex tout en restant dans le flux d'une ligne, comme un élément inline.
<p>
Texte avant
<span class="container">
<span>A</span>
<span>B</span>
</span>
texte après
</p>
.container{
display: inline-flex;
gap: 10px;
}
Texte avant A B texte après
Dans la majorité des cas, on utilise surtout display: flex;, car le container se comporte alors comme un bloc classique.
La propriété flex-direction
La propriété flex-direction définit le sens principal de placement des items.
Valeur row
Les items se placent de gauche à droite sur une même ligne.
.container{
display: flex;
flex-direction: row;
gap: 10px;
}
Valeur row-reverse
Les items restent sur une ligne, mais leur ordre visuel est inversé.
.container{
display: flex;
flex-direction: row-reverse;
gap: 10px;
}
Valeur column
Les items se placent les uns sous les autres, de haut en bas.
.container{
display: flex;
flex-direction: column;
gap: 10px;
}
Valeur column-reverse
Les items se placent en colonne, mais dans l'ordre visuel inverse.
.container{
display: flex;
flex-direction: column-reverse;
gap: 10px;
}
Attention ! Quand vous changez la direction, cela change aussi la façon d'interpréter d'autres propriétés comme justify-content et align-items.
La propriété flex-wrap
Par défaut, Flexbox essaie de garder tous les items sur une seule ligne. Si la place manque, ils rétrécissent. La propriété flex-wrap autorise ou non le retour à la ligne.
Valeur nowrap
Les items restent sur une seule ligne, même quand l'espace commence à manquer.
.container{
display: flex;
flex-wrap: nowrap;
}
Valeur wrap
Les items peuvent passer naturellement à la ligne suivante si le container devient trop étroit.
.container{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
Valeur wrap-reverse
Les items passent aussi à la ligne, mais les nouvelles lignes se construisent dans le sens inverse.
.container{
display: flex;
flex-wrap: wrap-reverse;
gap: 10px;
}
Cette propriété est très utile pour créer des listes de cartes ou des blocs qui doivent passer naturellement à la ligne quand l'espace horizontal devient trop petit.
La propriété flex-flow
La propriété flex-flow est une écriture raccourcie de flex-direction et flex-wrap.
Comme cette propriété combine deux réglages, on peut montrer plusieurs couples de valeurs utiles.
Valeur row wrap
Les items se placent sur une ligne et peuvent revenir à la ligne suivante si nécessaire.
.container{
display: flex;
flex-flow: row wrap;
gap: 10px;
}
Valeur column wrap
Les items se placent d'abord en colonne, puis passent dans une nouvelle colonne quand la hauteur manque.
.container{
display: flex;
flex-flow: column wrap;
height: 220px;
gap: 10px;
}
La ligne flex-flow: row wrap; signifie donc : les éléments se placent sur une ligne, et ils peuvent passer à la ligne suivante si nécessaire.
La propriété justify-content
La propriété justify-content répartit les items sur l'axe principal.
Avec flex-direction: row;, l'axe principal est horizontal. Avec flex-direction: column;, il devient vertical.
Valeur flex-start
Les items sont collés au début de l'axe principal.
.container{
display: flex;
justify-content: flex-start;
}
Valeur center
Les items sont regroupés au centre de l'axe principal.
.container{
display: flex;
justify-content: center;
}
Valeur flex-end
Les items sont repoussés vers la fin de l'axe principal.
.container{
display: flex;
justify-content: flex-end;
}
Valeur space-between
Le premier item touche le début, le dernier touche la fin, et l'espace libre est réparti entre les éléments.
.container{
display: flex;
justify-content: space-between;
}
Valeur space-around
Chaque item reçoit de l'espace autour de lui, avec un espace un peu plus petit sur les bords extérieurs.
.container{
display: flex;
justify-content: space-around;
}
Valeur space-evenly
L'espace est réparti de façon égale entre tous les items et sur les bords.
.container{
display: flex;
justify-content: space-evenly;
}
C'est une propriété très pratique pour répartir un menu, une série de boutons ou plusieurs blocs sur une même ligne.
La propriété align-items
La propriété align-items gère l'alignement des items sur l'axe secondaire, qu'on appelle aussi l'axe transversal.
Valeur stretch
Les items s'étirent sur l'axe transversal pour occuper toute la hauteur ou largeur disponible.
.container{
display: flex;
align-items: stretch;
min-height: 140px;
}
Valeur flex-start
Les items s'alignent au début de l'axe transversal.
.container{
display: flex;
align-items: flex-start;
min-height: 140px;
}
Valeur center
Les items se placent au centre de l'axe transversal.
.container{
display: flex;
align-items: center;
min-height: 140px;
}
Valeur flex-end
Les items se placent à la fin de l'axe transversal.
.container{
display: flex;
align-items: flex-end;
min-height: 140px;
}
Valeur baseline
Les items s'alignent en suivant la ligne de base de leur texte.
.container{
display: flex;
align-items: baseline;
}
Ici, les blocs n'ont pas la même hauteur, mais ils sont alignés au centre du container sur l'axe transversal.
La propriété align-content
La propriété align-content ressemble à align-items, mais elle ne travaille que lorsqu'il y a plusieurs lignes d'items.
Autrement dit, elle devient surtout utile avec flex-wrap: wrap;.
Valeur stretch
Les différentes lignes d'items s'étirent pour occuper toute la hauteur disponible du container.
.container{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 220px;
}
Valeur flex-start
Les lignes d'items se regroupent au début du container.
.container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 220px;
}
Valeur center
Les lignes d'items se regroupent au centre du container.
.container{
display: flex;
flex-wrap: wrap;
align-content: center;
height: 220px;
}
Valeur flex-end
Les lignes d'items se placent à la fin du container.
.container{
display: flex;
flex-wrap: wrap;
align-content: flex-end;
height: 220px;
}
Valeur space-between
L'espace vertical libre est réparti entre les différentes lignes d'items.
.container{
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 220px;
}
Valeur space-around
Chaque ligne reçoit de l'espace autour d'elle, avec un écart plus doux sur les bords.
.container{
display: flex;
flex-wrap: wrap;
align-content: space-around;
height: 220px;
}
Si vous n'avez qu'une seule ligne, align-content n'a généralement aucun effet visible.
Les propriétés gap, row-gap et column-gap
Pour créer un espace entre les items, on peut utiliser gap.
-
gaprègle l'espacement horizontal et vertical, -
row-gaprègle seulement l'espacement entre les lignes, -
column-gaprègle seulement l'espacement entre les colonnes.
Ces propriétés acceptent des valeurs numériques. On utilise souvent des unités comme px, rem ou % selon le contexte.
La propriété gap
Cette propriété règle en une seule fois l'espace entre les lignes et l'espace entre les colonnes.
.container{
display: flex;
flex-wrap: wrap;
gap: 15px 30px;
}
La propriété row-gap
Cette propriété ajoute de l'espace uniquement entre les différentes lignes.
.container{
display: flex;
flex-wrap: wrap;
row-gap: 25px;
column-gap: 0;
}
La propriété column-gap
Cette propriété ajoute de l'espace uniquement entre les colonnes.
.container{
display: flex;
flex-wrap: wrap;
row-gap: 0;
column-gap: 30px;
}
C'est souvent plus propre que d'ajouter des marges individuelles sur chaque item.
Les propriétés du flex item
Nous passons maintenant aux propriétés qui s'appliquent directement aux enfants du container.
La propriété order
La propriété order permet de modifier l'ordre visuel d'un item.
Valeur 0
Avec cette valeur, l'item garde sa position normale dans l'ordre visuel.
.item{
order: 0;
}
Valeur négative
Une valeur négative fait remonter l'item avant ceux qui ont une valeur plus grande.
.item-special{
order: -1;
}
Valeur positive
Une valeur positive repousse l'item après ceux qui ont une valeur plus petite.
.item-special{
order: 2;
}
Attention ! Cette propriété change seulement l'ordre visuel. Dans le code HTML, l'ordre réel des éléments reste le même. Il faut donc l'utiliser avec discernement.
La propriété flex-grow
La propriété flex-grow indique si un item peut grandir pour occuper l'espace disponible.
Une valeur de 0 signifie qu'il ne grandit pas. Une valeur de 1 signifie qu'il peut grandir. Si plusieurs items ont une valeur, ils se partagent l'espace en proportion.
Valeur 0
L'item garde seulement la place nécessaire à son contenu et n'essaie pas de grandir.
.item{
flex-grow: 0;
}
Valeur 1
L'item peut grandir pour occuper une part de l'espace libre.
.item{
flex-grow: 1;
}
Valeurs proportionnelles
Les items grandissent tous, mais certains prennent une part plus importante de l'espace disponible.
.item-a{
flex-grow: 1;
}
.item-b{
flex-grow: 2;
}
Le deuxième bloc prend ici plus de place que les deux autres, parce que sa valeur est plus grande.
La propriété flex-shrink
La propriété flex-shrink indique si un item peut rétrécir quand il manque de la place.
Par défaut, les items peuvent rétrécir avec flex-shrink: 1;. Si vous placez flex-shrink: 0;, l'élément essaiera de garder sa largeur de départ.
Valeur 0
L'item essaie de conserver sa largeur de départ et refuse de rétrécir.
.item{
flex-shrink: 0;
width: 220px;
}
Valeur 1
L'item accepte de rétrécir si l'espace manque dans le container.
.item{
flex-shrink: 1;
width: 220px;
}
Valeurs proportionnelles
Les items peuvent tous rétrécir, mais pas forcément avec la même intensité.
.item-a{
flex-shrink: 0;
}
.item-b{
flex-shrink: 2;
}
Quand l'espace manque, le premier bloc résiste davantage au rétrécissement que les autres.
La propriété flex-basis
La propriété flex-basis définit la taille de base d'un item avant que l'espace disponible soit réparti.
Vous pouvez utiliser différentes unités, par exemple px, %, rem ou encore auto.
Valeur auto
La taille de base de l'item dépend alors surtout de son contenu ou d'une largeur déjà définie ailleurs.
.item{
flex-basis: auto;
}
Valeurs fixes en px
Chaque item reçoit une taille de base précise exprimée en pixels.
.item-1{
flex-basis: 100px;
}
.item-2{
flex-basis: 200px;
}
Valeurs en pourcentage
La taille de base de chaque item est calculée en pourcentage de la largeur du container.
.item{
flex-basis: 30%;
}
La propriété flex
La propriété flex est une écriture raccourcie qui combine généralement flex-grow, flex-shrink et flex-basis.
Valeur initial
L'item revient au comportement flex de départ, sans croissance particulière et avec une taille de base automatique.
.item{
flex: initial;
}
Valeur auto
L'item peut grandir et rétrécir tout en partant d'une taille de base automatique.
.item{
flex: auto;
}
Valeur none
L'item ne grandit pas, ne rétrécit pas et garde une taille fixe liée à son contenu ou à sa largeur.
.item{
flex: none;
}
Valeur numérique simple
Une valeur simple sert surtout à partager l'espace disponible entre plusieurs items de manière proportionnelle.
.item-1{
flex: 1;
}
.item-2{
flex: 2;
}
Valeur complète
Cette écriture permet de régler en une seule ligne la croissance, le rétrécissement et la taille de base.
.item{
flex: 1 1 200px;
}
On rencontre aussi souvent flex: 1;. C'est une écriture courte très pratique pour demander à plusieurs items de se partager l'espace disponible.
La propriété align-self
La propriété align-self permet de modifier l'alignement d'un seul item, sans toucher aux autres.
Valeur auto
L'item reprend l'alignement défini globalement par le container.
.item{
align-self: auto;
}
Valeur flex-start
L'item se place au début de l'axe transversal, même si les autres sont alignés autrement.
.item{
align-self: flex-start;
}
Valeur center
L'item se place au centre de l'axe transversal sans modifier les autres items.
.item{
align-self: center;
}
Valeur flex-end
L'item se place à la fin de l'axe transversal.
.item{
align-self: flex-end;
}
Valeur stretch
L'item s'étire seul pour occuper toute la place disponible sur l'axe transversal.
.item{
align-self: stretch;
}
Valeur baseline
L'item s'aligne sur la ligne de base du texte plutôt que sur le bord supérieur ou inférieur.
.item{
align-self: baseline;
}
Cette propriété est utile quand un item doit se comporter différemment du reste du groupe.
Limites du système de positionnement en flex
Flexbox est très puissant, mais il ne fait pas tout.
- Il est surtout pensé pour organiser des éléments sur un axe principal, ou sur plusieurs lignes proches de cette logique.
- Pour une mise en page en deux dimensions, avec de vraies lignes et de vraies colonnes, Grid est souvent plus adapté.
-
Modifier l'ordre visuel avec
orderpeut créer une différence entre ce que l'on voit et l'ordre réel du HTML. - Certaines combinaisons de tailles, de contenus longs et de valeurs de flex demandent un peu de pratique pour être bien maîtrisées.
Malgré cela, Flexbox est aujourd'hui l'un des outils les plus utiles en CSS pour aligner des boutons, construire des barres de navigation, répartir des cartes ou organiser des blocs simples et souples.
Si vous retenez une idée, retenez celle-ci : commencez par identifier le container, puis ses items. Une fois cette base comprise, les propriétés de Flexbox deviennent beaucoup plus faciles à utiliser.