Comprendre et utiliser Flexbox en CSS

Flexbox est un système de mise en page introduit en CSS3 qui permet de disposer les éléments d'un conteneur de manière efficace, même lorsque la taille de ces éléments est inconnue ou dynamique.

Il fonctionne en appliquant des propriétés à un conteneur parent qui affectent la disposition de ses éléments enfants. Il se distingue par sa capacité à gérer à la fois l'alignement horizontal et vertical, et à réorganiser dynamiquement les éléments en fonction de l'espace disponible.

Propriétés appliquées au conteneur parent

flex-direction

La propriété flex-direction contrôle la direction dans laquelle les éléments sont placés dans le conteneur.

justify-content

La propriété justify-content contrôle l'alignement des éléments enfants le long de l'axe principal du conteneur. L'axe principal dépend de la valeur de flex-direction :

• Si flex-direction est défini sur row ou row-reverse, l'axe principal est horizontal (axe X).
• Si flex-direction est défini sur column ou column-reverse, l'axe principal est vertical (axe Y).

align-items

La propriété align-items contrôle l'alignement des éléments enfants sur l'axe secondaire (perpendiculaire à l'axe principal).

• Si flex-direction est défini sur row ou row-reverse, l'axe secondaire est vertical (axe Y).
• Si flex-direction est défini sur column ou column-reverse, l'axe secondaire est horizontal (axe X).

flex-wrap

La propriété flex-wrap détermine si les éléments flex doivent être répartis sur plusieurs lignes lorsque l'espace disponible est insuffisant. Elle accepte les valeurs suivantes :

flex-flow

La propriété flex-flow est un raccourci qui permet de définir à la fois flex-direction et flex-wrap en une seule déclaration. Elle accepte deux valeurs séparées par un espace :

• La première valeur correspond à flex-direction.
• La deuxième valeur correspond à flex-wrap.

align-content

La propriété align-content contrôle l'espacement entre les lignes de l'élément flex, lorsque plusieurs lignes sont présentes. Elle définit la manière dont l'espace est réparti entre ces lignes dans le conteneur. Les valeurs disponibles sont les suivantes :

Pour clarifier la distinction entre les deux propriétés : align-content et align-items

• align-content contrôle l'espacement entre les différentes lignes d'éléments.
• align-items contrôle l'alignement des éléments au sein de chaque ligne, en fonction de l'axe secondaire du conteneur.

align-content n’a d’effet que lorsqu'il y a plusieurs lignes d’éléments dans le conteneur. Si les éléments sont sur une seule ligne, cette propriété n'a aucun impact.

Propriétés appliquées à des éléments enfants

order 

Dans certains cas, inverser l'ordre des éléments dans une rangée ou une colonne avec la propriété flex-direction ne suffit pas. Pour ajuster l'ordre d'un élément particulier, on peut utiliser la propriété order.

Par défaut, tous les éléments ont une valeur order de 0, mais il est possible de lui attribuer une valeur numérique, qu'elle soit positive ou négative, afin de modifier leur position dans l'ordre d'affichage.

Voici un exemple simple pour illustrer son utilisation :

Si nous souhaitons que le cercle vert apparaisse dans le carré vert, nous pouvons appliquer ce style :

.green {
  order: 1;
}

align-self 

Cette propriété fonctionne de manière similaire à align-items, mais contrairement à align-items, align-self s'applique uniquement à l'élément ciblé, et non à l'ensemble des éléments enfants. Elle accepte les mêmes valeurs que align-items, permettant ainsi de personnaliser l'alignement vertical (ou horizontal, selon l'orientation) d'un élément spécifique, indépendamment des autres éléments du conteneur.

Gestion de l’espace dans un conteneur Flexbox

flex-grow

La propriété flex-grow définit la capacité d’un élément à s’agrandir lorsqu’il reste de l’espace disponible dans le conteneur.

• Valeur par défaut : 0

• Plus la valeur est élevée, plus l’élément occupe d’espace.

• Elle n’a d’effet que s’il reste de l’espace libre après le calcul des tailles de base.

Exemple :

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }.  /* item2 prendra deux fois plus d’espace que item1. */

flex-shrink

La propriété flex-shrink définit la capacité d’un élément à rétrécir lorsque l’espace disponible est insuffisant.

• Valeur par défaut : 1

• 0 = l’élément ne rétrécit jamais

• Plus la valeur est élevée, plus l’élément rétrécit rapidement par rapport aux autres.

Exemple :

.item {
  flex-shrink: 0;   /* L’élément garde sa taille même si le conteneur est trop petit. */
}

flex-basis

La propriété flex-basis définit la taille de base de l’élément avant l’application de flex-grow et flex-shrink.

.item {
  flex-basis: 200px;
}

• Valeur par défaut : auto

• Peut être en px, %, em, etc.

• Elle sert de point de départ pour le calcul de la taille finale de l’élément.

Raccourci  flex

La propriété flex est un raccourci qui combine flex-grow, flex-shrink et flex-basis.

flex: flex-grow flex-shrink flex-basis;

Un cas très courant est :

flex: 1;

signifie exactement :

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

• flex-grow : 1.  → l’élément prend l’espace disponible dans le conteneur. Si plusieurs éléments ont flex: 1, ils se partagent l’espace de manière équitable.

• flex-shrink : 1 → l’élément peut rétrécir si le conteneur est trop petit.
• flex-basis : 0  → la taille du contenu est ignorée au départ, ce qui facilite un partage égal de l’espace.