Introduction au modèle Flexbox

Le module Flexbox (Flexible Box Layout) constitue une solution robuste pour concevoir des interfaces réactives et structurées. Adopté par l'ensemble des navigateurs modernes, il permet de gérer l'alignement et la distribution de l'espace au sein d'un conteneur, même lorsque la taille des éléments est dynamique.

Activation du contexte Flex

Pour utiliser ce modèle, il suffit de définir la propriété display sur un élément parent. Cela transforme ses enfants directs en éléments flexibles.

.flex-wrapper {
  display: -webkit-flex; /* Préfixe pour anciens navigateurs WebKit */
  display: flex;         /* Activation standard */
}

Il est également possible d'utiliser une valeur inline pour intégrer le flux flex dans du texte :

.flex-wrapper {
  display: inline-flex; /* Conteneur flex intégré dans le flux inline */
}

Concepts fondamentaux

Un élément doté de display: flex devient un conteneur flex. Ses enfants directs sont automatiquement des éléments flex. Le modèle repose sur deux axes :

• Axe principal (main axis) : Direction par défaut d'alignement des éléments.
• Axe transversal (cross axis) : Perpendiculaire à l'axe principal.

Six attributs principaux permettent de contrôler la disposition globale au niveau du parent.

1. Orientation : flex-direction

Cette propriété définit la direction de l'axe principal.

.flex-wrapper {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row : Horizontale, de gauche à droite (défaut).
• row-reverse : Horizontale, de droite à gauche.
• column : Verticale, de haut en bas.
• column-reverse : Verticale, de bas en haut.

Par défaut, les éléments tentent de tenir sur une seule ligne. Cette propriété autorise le passage à la ligne.

.flex-wrapper {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap : Sur une seule ligne (défaut).
• wrap : Sur plusieurs lignes, de haut en bas.
• wrap-reverse : Sur plusieurs lignes, de bas en haut.

Combine flex-direction et flex-wrap en une seule déclaration.

.flex-wrapper {
  flex-flow: <direction> <wrap>; /* Exemple : column wrap */
}

4. Alignement sur l'axe principal : justify-content

Définit la distribution de l'espace libre le long de l'axe principal.

.flex-wrapper {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start : Alignement au début.
• flex-end : Alignement à la fin.
• center : Centré.
• space-between : Espaces égaux entre les éléments.
• space-around : Espaces égaux autour de chaque élément.

Contrôle l'alignement des éléments sur l'axe secondaire (perpendiculaire).

.flex-wrapper {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• stretch : Étirement pour remplir le conteneur (défaut).
• center : Centré verticalement (si axe principal horizontal).
• baseline : Alignement sur la ligne de base du texte.

Utilisé uniquement lorsque flex-wrap est activé et qu'il y a plusieurs lignes. Cela aligne les lignes entre elles.

.flex-wrapper {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Chaque enfant du conteneur peut posséder ses propres règles de comportement au sein du flux.

1. Ordre d'affichage : order

Permet de modifier l'ordre visuel sans changer le HTML.

.flex-child {
  order: <entier>; /* Valeurs négatives acceptées, défaut 0 */
}

Indique combien d'espace supplémentaire l'élément doit absorber.

.flex-child {
  flex-grow: <nombre>; /* 0 par défaut (ne grandit pas) */
}

Si tous les éléments ont la même valeur, l'espace restant est divisé équitablement.

Définit la capacité de l'élément à rétrécir si l'espace manque.

.flex-child {
  flex-shrink: <nombre>; /* 1 par défaut (réduction active) */
}

Une valeur de 0 empêche l'élément de se comprimer.

Définit la taille initiale de l'élément avant la distribution de l'espace libre.

.flex-child {
  flex-basis: auto | <longueur>; /* Exemple : 200px */
}

5. Raccourci flex

Combine flex-grow, flex-shrink et flex-basis.

.flex-child {
  flex: <grow> <shrink> <basis>; /* Exemple : 1 0 auto */
}

• flex: auto équivaut à 1 1 auto.
• flex: none équivaut à 0 0 auto.

6. Alignement individuel : align-self

Permet à un élément spécifique de déroger à l'alignement défini par align-items du conteneur.

.flex-child {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}