La disposition Flexbox, ou « Flexible Box Layout », est l'une des fonctionnalités CSS3 les plus appréciées pour la création de mises en page unidimensionnelles complexes et réactives. Introduite par le W3C, elle offre une approche simplifiée et efficace pour organiser les éléments dans un conteneur, en leur donnant la capacité de s'adapter dynamiquement à l'espace disponible.

Le principe fondamental de Flexbox est de donner au conteneur (appelé conteneur flex) le pouvoir de gérer la taille, l'ordre et l'alignement de ses enfants (appelés éléments flex) selon une logique de distribution d'espace. Pour activer Flexbox, un élément doit avoir la propriété display: flex ou display: inline-flex.

Chaque conteneur flex est défini par deux axes principaux :

• L'axe principal (main axis) : L'axe le long duquel les éléments flex sont disposés. Son point de départ est le main-start et son point de fin est le main-end.
• L'axe secondaire (cross axis) : L'axe perpendiculaire à l'axe principal. Son point de départ est le cross-start et son point de fin est le cross-end.

La dimension d'un élément le long de l'axe principal est appelée main-size, et le long de l'axe secondaire, cross-size.

Il est important de noter que l'utilisation de Flexbox annule l'effet des propriétés float, clear et vertical-align sur les éléments flex enfants.

Propriétés du Conteneur Flex

Les propriétés suivantes sont définies sur le conteneur flex (l'élément parent) et contrôlent la disposition générale de ses enfants.

flex-direction

Cette propriété détermine la direction de l'axe principal, influençant ainsi la manière dont les éléments flex sont organisés à l'intérieur du conteneur.

• row (par défaut) : L'axe principal est horizontal, les éléments sont disposés de gauche à droite.
• row-reverse : L'axe principal est horizontal, les éléments sont disposés de droite à gauche.
• column : L'axe principal est vertical, les éléments sont disposés de haut en bas.
• column-reverse : L'axe principal est vertical, les éléments sont disposés de bas en haut.

flex-wrap

Gère le comportement des éléments flex lorsqu'ils dépassent la capacité d'une seule ligne du conteneur. Par défaut, les éléments tentent de rester sur une seule ligne.

• nowrap (par défaut) : Les éléments ne passent pas à la ligne et peuvent déborder du conteneur ou être réduits pour s'adapter.
• wrap : Les éléments passent à la ligne suivante si l'espace est insuffisant. Les nouvelles lignes sont ajoutées sous la précédente (pour flex-direction: row).
• wrap-reverse : Les éléments passent à la ligne si nécessaire, mais les nouvelles lignes sont ajoutées au-dessus de la précédente.

flex-flow

C'est une propriété raccourcie qui combine flex-direction et flex-wrap. Sa valeur par défaut est row nowrap.

.mon-conteneur {
    flex-flow: column wrap-reverse;
}

justify-content

Définit l'alignement des éléments flex le long de l'axe principal du conteneur, une fois l'espace disponible distribué.

• flex-start (par défaut) : Les éléments sont regroupés au début de l'axe principal.
• flex-end : Les éléments sont regroupés à la fin de l'axe principal.
• center : Les éléments sont centrés sur l'axe principal.
• space-between : Les éléments sont distribués uniformément ; le premier est au début, le dernier à la fin. L'espace est entre les éléments.
• space-around : Les éléments sont distribués uniformément avec un espace égal autour d'eux. Les espaces aux extrémités sont la moitié de l'espace entre les éléments.

align-items

Définit comment les éléments flex sont alignés le long de l'axe secondaire (perpendiculaire à l'axe principal) à l'intérieur d'une seule ligne.

• flex-start : Les éléments sont alignés au début de l'axe secondaire.
• flex-end : Les éléments sont alignés à la fin de l'axe secondaire.
• center : Les éléments sont centrés sur l'axe secondaire.
• baseline : Les éléments sont alignés sur la ligne de base de leur contenu.
• stretch (par défaut) : Les éléments s'étirent pour remplir le conteneur le long de l'axe secondaire, à moins qu'une hauteur (ou largeur pour column) ne soit définie.

align-content

Gère l'alignement des lignes d'éléments flex le long de l'axe secondaire lorsque le conteneur contient plusieurs lignes (c'est-à-dire que flex-wrap est défini sur wrap ou wrap-reverse). Cette propriété n'a pas d'effet si le conteneur n'a qu'une seule ligne.

• flex-start : Les lignes sont regroupées au début de l'axe secondaire.
• flex-end : Les lignes sont regroupées à la fin de l'axe secondaire.
• center : Les lignes sont centrées sur l'axe secondaire.
• space-between : Les lignes sont distribuées uniformément, avec la première ligne au début et la dernière à la fin.
• space-around : Les lignes sont distribuées uniformément avec un espace égal autour de chaque ligne.
• stretch (par défaut) : Les lignes s'étirant pour occuper l'espace restant disponible.

Propriétés des Éléments Flex

Ces propriétés sont appliquées directement sur les éléments enfants du conteneur flex (les éléments flex).

order

Détermine l'ordre visuel des éléments flex, indépendamment de leur ordre dans le document HTML. La valeur par défaut est 0. Les éléments avec une valeur order plus petite apparaissent en premier.

<div class="boite-flex" style="display: flex;">
    <div class="element" style="order: 4;"><h3>Article Alpha</h3></div>
    <div class="element" style="order: 2;"><h3>Article Beta</h3></div>
    <div class="element" style="order: 3;"><h3>Article Gamma</h3></div>
    <div class="element" style="order: 1;"><h3>Article Delta</h3></div>
</div>

Dans cet exemple, "Article Delta" apparaîtra en premier, suivi de "Article Beta", puis "Article Gamma", et enfin "Article Alpha", en dépit de leur ordre dans le code source.

flex-grow

Spécifie la capacité d'un élément flex à s'étirer et à occuper l'espace disponible restant dans le conteneur. La valeur par défaut est 0, ce qui signifie que l'élément ne s'étirera pas. Un nombre positif indique une proportion de l'espace libre à distribuer entre les éléments.

<div class="conteneur-adaptatif" style="display: flex;">
    <div class="bloc" style="flex-grow: 1;"><span>Section A</span></div>
    <div class="bloc" style="flex-grow: 2;"><span>Section B</span></div>
    <div class="bloc" style="flex-grow: 3;"><span>Section C</span></div>
</div>

Ici, si 120px d'espace supplémentaire sont disponibles, "Section A" prendra 20px, "Section B" 40px et "Section C" 60px (dans un rapport de 1:2:3).

flex-shrink

Indique la capacité d'un élément flex à rétrécir par rapport à sa taile de base, si l'espace dans le conteneur est insuffisant. La valeur par défaut est 1, ce qui permet aux éléments de rétrécir. Une valeur de 0 empêche l'élément de rétrécir.

flex-basis

Définit la taille initiale d'un élément flex avant que l'espace restant ne soit distribué par flex-grow ou absorbé par flex-shrink. La valeur par défaut est auto, qui utilise la taille de contenu de l'élément.

<div class="parent-flex" style="display: flex;">
    <div class="enfant" style="flex-basis: 80px;"><span>Composant 1</span></div>
    <div class="enfant" style="flex-basis: 160px;"><span>Composant 2</span></div>
    <div class="enfant" style="flex-basis: 240px;"><span>Composant 3</span></div>
</div>

Ces éléments commenceront avec les largeurs spécifiées avant toute distribution d'espace.

flex

Cette propriété est un raccourci pour flex-grow, flex-shrink, et flex-basis, dans cet ordre. Les valeurs par défaut sont 0 1 auto. Par exemple, flex: 1; est équivalent à flex: 1 1 0%; et signifie que l'élément peut grandir, peut rétrécir, et sa taille de base est de 0.

align-self

Permet à un élément flex spécifique d'aligner sa propre position sur l'axe secondaire, en remplaçant la valeur définie par align-items pour le conteneur parent. La valeur par défaut est auto, ce qui signifie qu'il hérite de align-items.

• auto (par défaut) : Hérite la valeur de align-items du parenet.
• flex-start : Aligne l'élément au début de l'axe secondaire.
• flex-end : Aligne l'élément à la fin de l'axe secondaire.
• center : Centre l'élément sur l'axe secondaire.
• baseline : Aligne l'élément sur la ligne de base de son contenu.
• stretch : Étire l'élément pour remplir le conteneur le long de l'axe secondaire.