Comprendre et utiliser Flexbox CSS

Flexbox CSS Layout est un modèle de mise en page permettant d’afficher les éléments de contenu d’une page web en boîtes flexibles. Avec ses diverses propriétés, Flexbox est une alternative intéressante par rapport au modèle de mise en page Float. En effet, le contrôle de l’alignement, la direction, la taille et l’ordre des boîtes de contenu se fait aisément.

Exemple pratique avec un conteneur div et 4 conteneurs enfants div.

Et une feuille de style associée.

Les propriétés du conteneur parent : flex

La direction : flex-direction

La lecture de la page peut se faire en ligne – row ou en colonne – column. Ce sens de lecture définira l’axe principal de votre page.

Par exemple : l’axe principal d’une organisation des éléments enfants en ligne est horizontal, l’axe secondaire est l’axe vertical. C’est l’inverse si les éléments enfants sont organisés en colonne, l’axe secondaire est l’axe horizontal.

• row : les éléments enfants sont affichés en ligne, de gauche à droite. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

• row-reverse : les éléments sont affichés en ligne, de droite à gauche

• column : les éléments sont affichés en colonne de haut en bas

• column-reverse : les éléments sont affichés en colonne de bas en haut

Les propriétés d’alignement : justify-content et align-items

Justify-content

Cette propriété s’utilise pour définir l’alignement horizontal et les espaces entre chacun des éléments enfants
répartis sur l’axe principal.

• flex-start : les éléments enfants se placent au début de l’élément parent. C’est la valeur par défaut. Il n’est
  pas nécessaire de la renseigner dans la feuille de style.

• flex-end : les éléments enfants se placent à la fin de l’élément parent.

• center : les éléments enfants se placent au centre de l’élément parent.

• space-between : les éléments enfants sont uniformément répartis avec un espace entre eux. Le premier élément enfant étant situé au début, le dernier à la fin du parent.

• space-around : les éléments enfants sont uniformément répartis et entourés d’un espace.

• space-evenly : les éléments enfants sont uniformément répartis et l’espace qui les séparent est égal.

align-items

Cette propriété d’alignement s’utilise sur l’axe secondaire.

• stretch : les éléments enfants s’étirent pour remplir l’élément parent. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

• flex-start : les éléments enfants sont empilés au début de l’élément parent.

• flex-end : les éléments enfants sont empilés à la fin de l’axe secondaire.

• center : les éléments enfants sont empilés au centre de l’axe secondaire.

Gérer les débordements et les aligner : flex-wrap et align-content

flex-wrap

Par défaut, tous les éléments enfants se placent sur une seule ligne. Lorsque ces éléments enfants sont trop larges (espacement intérieur – padding, ou extérieur – margin) pour leur conteneur parent, ils débordent de celui-ci.

La propriété flex-wrap permet de gérer les retours à la ligne, grâce aux valeurs suivantes.

• nowrap : c’est la valeur par défaut, elle n’a donc pas besoin d’être écrite. Il n’y a pas de retour à la ligne, les éléments enfants se serrent sur la même ligne pour tenir dans l’élément parent, quelque soit les valeurs de largeurs affectées aux éléments. La valeur de largeur des éléments enfants n’est pas prise en compte.

• wrap : les éléments enfants passent à la ligne, et les valeurs de largeurs sont prises en compte.

• wrap-reverse : les éléments enfants passent à la ligne et s’affichent dans l’ordre inverse.

align-content

Cette propriété permet d’aligner les éléments enfants sur l’axe secondaire. Son rôle et les valeurs sont les mêmes que pour la propriété justify-content qui affecte l’axe principal.

• stetcht : les lignes des éléments enfants s’étirent pour occuper tout l’espace disponible. C’est la valeur par défaut, elle n’a pas besoin d’être écrite.

• flex-start : les lignes des éléments enfants se placent au début de l’élément parent.

• flex-end : les lignes des éléments enfants se placent à la fin de l’élément parent.

• center : les lignes des éléments enfants se placent au centre de l’élément parent.

• space-between : les lignes éléments enfants sont uniformément réparties dans l’élément parent. La première en début de contenu, la dernière en fin de contenu.

• space-around : les lignes des éléments enfants sont uniformément réparties dans l’élément parent avec un espace autour.

• space-evenly : les lignes des éléments enfants sont uniformément réparties dans l’élément parent, les espaces autour sont égaux.

La propriété flex-flow

Cette propriété permet d’associer les propriétés et les valeurs de flex-direction (axe-principal) et de flex-wrap (axe-secondaire) en une seule ligne de css. Par défaut cette propriété prend les valeurs suivantes : flex-flow : row nowrap . Le flux s’affiche en ligne, sans passage à la ligne.

Les propriétés des éléments enfants

La propriété order

Cette propriété permet d’affecter un ordre d’affichage aux éléments enfant et ce quel que soit leur ordre d’écriture dans le flux html. La valeur par défaut est 0. Les valeurs affectées sont des nombres entiers.

La propriété align-self

Cette propriété permet d’affecter un alignement spécifique sur l’axe secondaire à un ou plusieurs éléments enfants indépendamment de l’alignement défini dans le conteneur parent. Les valeurs prises sont les même que pour align-items (strecth : valeur par défaut, flex-start, flex-end et center).

• Exemple : flex-end

• Exemple : center

La propriété flex-grow

Cette propriété permet d’augmenter la taille relative d’un ou plusieurs éléments par rapport aux entres enfants de l’élément parent.
Exemples :

La propriété flex-shrink

A l’inverse de flex-grow, flex-shrink permet de réduire la taille d’un ou plusieurs éléments enfants.

Exemples :

La propriété flex-basis

Cette propriété définit la taille de base des élément enfants, l’espace disponible restant sera occupé en fonction des facteurs de flexibilité. Si l’axe principal est horizontal (row) cela correspond à une largeur, si l’axe principal est vertical (column) cela correspond à une hauteur.

Comme pour les propriétés css classiques de width ou height, les valeurs acceptées sont de type longueur absolue ou relative (px, %, rem, em). La valeur par défaut étant auto, cette propriété accepte aussi les valeurs de content (selon le contenu), initial et inherit.

Exemple :

La propriété flex

C’est une propriété raccourcie de flex-grow, flex-shrink et flex-basis. Les valeurs automatiques, sans autres précisions sont : flex : 1 1 auto ;

Tester votre mise en page flex avec l’outil : flexbox.help