Flexbox CSS – Flexible Box Layout : Le Guide Complet

Le flexbox va nous permettre de créer des dispositions complexes pour nos documents HTML. Ce modèle se compose d’un conteneur flexible et d’éléments flexibles dont la principale caractéristique va d’être… flexibles, c’est-à-dire de posséder une taille qui va s’adapter en fonction de l’espace disponible.

La déclaration d’un conteneur flexible crée automatiquement un nouveau contexte d’empilement ce qui signifie que les descendants directs d’un élément définir comme conteneur flexibles deviendront immédiatement des éléments flexibles auxquels on va pouvoir appliquer les propriétés du flexbox.

Le flexbox est, à la différence du modèle des grilles, un modèle de disposition principalement unidimensionnel : nous allons devoir définir un axe principal et un axe secondaire et la majorité du positionnement et de l’alignement des éléments flexibles va se faire selon l’axe principal.

A noter : Les propriétés float, clear et vertical-align n’ont aucun effet sur les éléments flexibles.

Création d’un conteneur flexible

Pour utiliser les propriétés du flexbox, nous allons déjà devoir définir un conteneur flexible. On va pour cela appliquer un display : flex ou display : inline-flex à un élément.

Cela crée automatiquement un nouveau contexte de formatage pour les éléments descendants directs de l’élément conteneur flexible.

Notez que display : flex va créer un conteneur flexible de niveau bloc tandis que display : inline-flex va créer un conteneur flexible de niveau inline.

Un conteneur avec display : flex occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-flex n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.

Vous pouvez voir la différence de comportement entre display : flex et display : inline-flex avec l’exemple suivant code HTML puis code CSS puis résultat) :

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

Ici, on utilise 4 éléments div class="container" et div class="inline-container" qu’on définit comme conteneurs flexibles. Les éléments à l’intérieur de ces conteneurs (les div class="item") deviennent de facto des éléments flexibles.

On voit bien que les deux premiers conteneurs flexibles, qui sont de type bloc, occupent toute la largeur dans leur élément conteneur (le body de la page) tandis que les deux derniers qui sont de niveau inline n’occupent que la place nécessaire à leur contenu et se placent côte-à-côte et non pas sur une nouvelle ligne.

&nbsp ;

Définir la direction du placement des éléments flexibles : flex-direction

Le flexbox est un modèle principalement unidimensionnel. Cela implique qu’on va devoir définir un axe principal selon lequel nos éléments flexibles vont venir s’écouler. En termes physiques, l’axe principal peut être soit horizontal, soit vertical.

On utilise la propriété flex-direction pour définir la direction et le sens de l’axe principal utilisé par le conteneur flexible pour placer les éléments flexibles.

Cette propriété accepte les valeurs suivantes :

• row (valeur par défaut) : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode. Le début de l’axe sera là où le texte commence et la fin sera là où il va (si le texte est horizontal et va de gauche à droite, le début de l’axe est physiquement le coin gauche et la fin le coin droit) ;
• row-reverse : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode ou direction. La fin de l’axe correspond au côté où le texte démarre et inversement ;
• column : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Le début de l’axe correspond au côté lié au début de l’axe de bloc et la fin de l’axe au côté lié à la fin de l’axe de bloc. Dans un mode où les blocs s’empilent verticalement et de haut vers le bas, le début de l’axe correspond physiquement au bord supérieur et la fin au bord inférieur ;
• column-reverse : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. La fin de l’axe correspond au côté lié au début de l’axe de bloc et inversement.

Attention : retenez bien que le résultat produit par ces valeurs dépend des valeurs définies pour la propriété writing-mode.

La propriété writing-mode permet d’indiquer si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

Par défaut, les blocs vont s’empiler verticalement de haut en bas et le texte va s’écouler horizontalement, de gauche à droite. Dans ce cas-là, l’axe de bloc sera physiquement l’axe vertical et le début physique de l’axe sera le haut. L’axe en ligne sera physiquement l’axe horizontal et le début sera à gauche.

Pour en savoir plus à ce sujet, n’hésitez pas à consulter mon article sur les valeurs logiques et les modes d’écriture en CSS.

Prenons immédiatement un premier exemple d’utilisation de flex-direction avec writing-mode : horizontal-tb :

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée trois conteneurs flexibles. Le mode d’écriture est défini par writing-mode qui va appliquer sa valeur par défaut qui est horizontal-tb. Cette valeur signifie que les blocs s’empilent verticalement, de haut en bas. Le mode d’écriture et le mode typographique sont horizontaux.

On passe un flex-direction : row à notre premier conteneur. L’axe principal du conteneur va avoir la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode et le début de l’axe sera le côté ou commence le texte.

Avec writing-mode : horizontal-tb, les blocs s’empilent verticalement. L’axe de bloc est donc l’axe vertical et l’axe en ligne est l’axe horizontal. La direction de l’écriture est de gauche ) droite pour moi ; le début de l’axe se situe donc physiquement à gauche.

L’axe principal du conteneur sera donc physiquement l’axe horizontal et le début de l’axe sera ) gauche. Les éléments flexibles vont venir se placer selon cet axe, donc en ligne et de gauche à droite.

On passe un flex-direction : row-reverse à notre deuxième conteneur. L’axe principal sera donc également physiquement l’axe horizontal et le début de l’axe correspondra au côté où arrive la texte, c’est-à-dire physiquement à droite pour moi.

Finalement, on passe un flex-direction : column à notre troisième conteneur. L’axe principal du conteneur aura donc la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Ce sera donc ici physiquement l’axe vertical. Le début de l’axe correspond au côté lié au début de l’axe de bloc, c’est-à-dire dans une disposition de haut en bas au côté supérieur.

Les éléments flexibles de ce conteneur vont donc être disposés en colonne, de haut en bas.

Changeons maintenant de mode d’écriture afin de voir l’impact sur les valeurs de flex-direction. On peut par exemple choisir des writing-mode : vertical-lr et writing-mode : sideways-lr.

Dans le cas d’un writing-mode : vertical-lr, les blocs s’empilent horizontalement, de droite à gauche et le mode d’écriture et le mode typographique sont verticaux. L’axe de bloc est donc physiquement l’axe horizontal.

Dans le cas d’un writing-mode : sideways-lr, les blocs s’empilent horizontalement, de gauche à droite. Le mode d’écriture est vertical, tandis que le mode typographique est horizontal. L’axe de bloc est donc physiquement l’axe horizontal.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

Contrôler le passage à la ligne des éléments flexibles : flex-wrap

La propriété flex-direction permet de définir quel axe est l’axe principal du conteneur flexible et la direction du placement des éléments flexibles dans cet axe.

La propriété flex-wrap permet d’indiquer si les éléments flexibles ont le droit de passer à la ligne ou pas (c’est-à-dire si le conteneur flexible peut être multilignes ou pas) ainsi que la direction des éléments dans laquelle les lignes doivent être empilées (c’est-à-dire la direction de l’axe secondaire).

A noter :

1. On entend par « ligne » une ligne dans la direction de l’axe principal : une « ligne » peut être une rangée si l’axe principal est horizontal ou une colonne si l’axe principal est l’axe vertical ;
2. L’axe secondaire est défini automatiquement lorsqu’on définit l’axe principal : si l’axe principal est l’axe horizontal, l’axe secondaire sera l’axe vertical et inversement.

Par défaut, il faut savoir que les conteneurs flexibles sont monoligne (les éléments flexibles n’ont pas le droit de passer à la ligne). Cela peut poser un problème lorsqu’un conteneur flexible possède beaucoup d’éléments flexibles (ou que ceux-ci possèdent des tailles explicites) puisqu’ils risquent alors de dépasser du conteneur.

La propriété flex-wrap va nous permettre de modifier ce comportement et de permettre aux éléments d’aller se placer sur la ligne (rangée ou colonne) suivante plutôt que de dépasser du conteneur flexible. Cette propriété supporte les valeurs suivantes :

• nowrap (valeur par défaut) : Les éléments n’ont pas le droit d’aller à la ligne ;
• wrap : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. L’axe secondaire aura la même direction que l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) défini par writing-mode ;
• wrap-reverse : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. La direction de l’axe secondaire sera inversée par rapport à celle de l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) définie par writing-mode.

Imaginons qu’on ait défini un writing-mode : horizontal-tb. Le texte va donc s’écouler physiquement de gauche à droite puis de haut en bas.

Si on a également défini un conteneur flexible avec flex-direction : row, alors l’axe principal est l’axe physique horizontal et le contenu s’écoule de gauche à droite. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer sous les premiers (les lignes vont s’empiler du haut vers le bas). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer au-dessus des premiers (les lignes vont s’empiler du bas vers le haut).

Si on a plutôt défini un conteneur flexible avec flex-direction : column, alors l’axe principal est l’axe physique vertical et le contenu s’écoule de haut en bas. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer à droite des premiers (les lignes vont s’empiler de la gauche vers la droite). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer à gauche des premiers (les lignes vont s’empiler de la droite vers la gauche).

Regardez plutôt l’exemple suivant :

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

Note : Dans cet exemple, j’ajoute des tailles explicites à mes éléments flexibles afin que la taille totale des éléments flexibles soit plus grande que celle du conteneur dans son axe principal (en largeur si l’axe principal est horizontal ou en hauteur si l’axe principal est vertical). Je fais cela plutôt que d’ajouter beaucoup d’éléments pour ne pas que mon code d’exemple soit trop long.

Si aucun passage à la ligne n’est autorisé, les éléments vont par défaut essayer de rétrécir pour rentrer dans le conteneur. C’est la raison pour laquelle vous ne voyez aucun élément dépasser. Cependant, si vous essayez d’ajouter des éléments dans le conteneur, vous allez voir qu’ils vont dépasser à partir du moment où la somme des largeurs des contenus sera plus importante que la taille du conteneur.

La propriété raccourcie flex-flow

La propriété flex-flow est une propriété raccourcie qui permet de définir les valeurs de flex-direction et de flex-wrap en une seule fois.

Contrôler la flexibilité des éléments flexibles avec flex

L’un des intérêts principaux du flexbox est de définir des éléments flexibles et de pouvoir contrôler leur flexibilité, c’est-à-dire leur capacité à rétrécir si le conteneur a besoin d’espace ou au contraire de s’étendre si il reste de l’espace dans le conteneur flex à distribuer.

Contrôler la faculté des éléments flexibles à s’étendre avec flex-grow

La propriété flex-grow permet de définir le facteur d’agrandissement d’un élément flexible.

Ce facteur d’agrandissement détermine la quantité d’espace disponible qui sera absorbée par cet élément flexible par rapport aux autres éléments flexibles. La valeur par défaut est flex-grow : 0 qui signifie que les éléments flexibles n’ont pas le droit de grandir.

Imaginons un conteneur flexible avec flex-direction : row qui fait 1000px de large et qui contient 3 éléments qui font chacun 200px de large. Il reste donc 1000 – (3 * 200) = 400px d’espace disponible en largeur.

On définit un flex-grow : 2 au premier élément flexible et un flex-grow : 1 aux deux autres. Le premier élément va grandir de manière à absorber deux fois plus d’espace que les autres. Il va donc absorber 200px sur les 400 restants tandis que les deux autres éléments vont absorber 100px chacun.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

Contrôler la faculté des éléments flexibles à rétrécir avec flex-shrink

La propriété flex-shrink permet de définir le facteur de rétrécissement d’un élément flexible.

Ce facteur de rétrécissement détermine la capacité des éléments à se compresser pour faire de la place dans le conteneur lorsque la taille de l’ensemble des éléments flexibles est supérieure à celle du conteneur.

La valeur par défaut est flex-shrink : 1, ce qui signifie que les éléments vont par défaut se compresser au besoin. C’est la raison pour laquelle ils ne dépassaient pas du conteneur dans l’exemple donné pour illustrer le comportement de la propriété flex-wrap.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

Définir la taille de base des éléments flexibles avant distribution de l’espace restant

La propriété flex-basis permet de définir la taille de base des éléments flexibles avant distribution de l’espace restant ou rétrécissement. La taille définie sera la largeur si l’axe principal est horizontal ou la hauteur si l’axe principal est vertical.

La propriété flex-basis accepte des valeurs de type longueur absolue (px par exemple) ou relative (% par exemple) ainsi que les valeurs auto (valeur par défaut) et content.

La valeur auto indique que la propriété flex-basis devra se référer à la valeur définie par width ou height si elle a été définie (ou sera égale à content si rien n’a été défini).

La valeur content indique que la taille de l’élément flexible sera relative à celle de son contenu. Attention, cette valeur est encore peu supportée (elle n’est notamment pas supportée par Chrome ni par Safari).

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

La propriété raccourcie flex

La propriété flex est une propriété raccourcie qui permet de définir les valeurs de flex-grow, flex-shrink et flex-basis d’un seul coup.

On peut soit passer les valeurs des propriétés flex-grow, flex-shrink et flex-basis à la suite à flex, soit lui passer les mots clefs suivants :

• flex : initial qui est l’équivalent de flex : 0 1 auto ;
• flex : auto qui est l’équivalent de flex : 1 1 auto ;
• flex : none qui est l’équivalent de flex : 0 0 auto.

Gérer l’alignement des éléments flexibles selon l’axe principal : justify-content

La propriété justify-content va nous permettre de gérer l’alignement des éléments flexibles selon l’axe principal choisi pour le conteneur flex. On va appliquer justify-content au conteneur flex.

Si l’axe principal est l’axe horizontal, on va par exemple pouvoir aligner (grouper) les éléments à gauche, à droite, au centre ou encore faire en sorte qu’ils soient répartis équitablement dans l’axe, etc.

La propriété justify-content supporte les valeurs suivantes :

• flex-start (valeur par défaut) : Les éléments sont groupés au début de l’axe principal ;
• flex-end : Les éléments sont groupés à la fin de l’axe principal ;
• center : Les éléments sont groupés au centre de l’axe principal ;
• space-between : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. Le début du premier élément est collé contre le début du conteneur et la fin du dernier élément est collée contre la fin du conteneur ;
• space-around : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. L’espace entre le début du premier élément et le début du conteneur et entre la fin du dernier élément et la fin du conteneur est égal à la moitié de l’espace entre deux éléments.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée cinq conteneurs flexibles avec un axe principal horizontal et trois conteneurs flexibles avec un axe principal vertical qui contiennent chacun trois éléments flexibles. Chacun des éléments flexibles possède un flex : 0 0 20% afin de s’assurer qu’il reste de l’espace dans l’axe principal du conteneur (condition nécessaire pour observer l’effet de justify-content). On applique ensuite la propriété justify-content avec des valeurs différentes à chaque conteneur.

Gérer l’alignement des éléments flexibles selon l’axe secondaire : align-items et align-self

La propriété justify-content permet d’aligner les éléments flexibles selon l’axe principal du conteneur flex. La propriété align-items permet elle d’aligner les éléments flexibles selon l’axe secondaire du conteneur flex.

Si l’axe principal est l’axe horizontal, la propriété align-items va donc gérer l’alignement des éléments dans l’axe vertical et inversement.

La propriété align-self permet quant à elle de régler l’alignement des éléments flexibles de manière individuelle.

Nous allons appliquer align-items au conteneur et align-self aux différents éléments flexibles. Notez que si align-items et align-self sont définies pour un élément, la valeur retenue pour l’élément flexible sera celle de align-self.

Les propriétés align-items et align-self supportent les valeurs suivantes :

• auto (uniquement supportée par align-self) : L’alignement des éléments flexibles dans l’axe secondaire du conteneur est contrôlé par la valeur de align-items du parent de l’élément ;
• flex-start : Les éléments flexibles vont se grouper au début de l’axe secondaire ;
• flex-end : Les éléments flexibles vont se grouper à la fin de l’axe secondaire ;
• center : Les éléments flexibles vont se grouper au centre de l’axe secondaire ;
• baseline : Les éléments vont s’aligner dans l’axe secondaire de telle manière à ce que leur ligne de base soit alignée ;
• stretch : Les éléments flexibles vont s’étendre pour occuper toute la place dans l’axe secondaire du conteneur flex.

A noter que la valeur par défaut de align-items est stretch tandis que celle de align-self est auto.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

Les cinq premiers conteneurs flexibles de l’exemple précédent possèdent un axe principal physique horizontal. La propriété align-items va donc aligner les éléments dans l’axe secondaire. Le début physique de cet axe est le bord supérieur du conteneur et la fin le bord inférieur. align-items : flex-start va donc aligner les éléments en haut tandis que align-items : flex end alignera les éléments en bas.

Pour les conteneurs flex dont l’axe principal est l’axe vertical, la propriété align-items va aligner les éléments dans l’axe horizontal (à gauche, à droite, etc.).

Un élément du dernier conteneur possède également un align-self : center afin que vous puissiez bien observer que cette propriété applique sa valeur par-dessus align-items.

Gérer l’alignement des lignes selon l’axe secondaire : align-content

Dans certains cas, il peut arriver que le conteneur flexible soit plus grand que l’ensemble des éléments qu’il contient dans son axe secondaire et qu’il reste donc de l’espace à distribuer.

Dans ce cas-là, on peut utiliser la propriété align-content qui va servir à aligner les différentes lignes selon l’axe secondaire du conteneur, c’est-à-dire qui va nous permettre de répartir l’espace restant selon l’axe secondaire du conteneur en plaçant cet espace avant, après ou entre les lignes.

Notez que la propriété align-content n’a aucun effet si le conteneur flexible ne possède qu’une seule ligne.

La propriété align-content supporte les valeurs suivantes :

• flex-start : Les lignes d’éléments flexibles vont se grouper au début du conteneur flexible selon son axe secondaire ;
• flex-end : Les lignes d’éléments flexibles vont se grouper à la fin du conteneur flexible selon son axe secondaire ;
• center : Les lignes d’éléments flexibles vont se grouper au centre du conteneur flexible selon son axe secondaire ;
• space-between : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. Il n’y a pas d’espace entre le départ du conteneur et la première ligne ni entre la fin du conteneur et la dernière ligne ;
• space-around : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. L’écart entre le début du conteneur et la première ligne et entre la dernière ligne et la fin du conteneur est égal à la moitié de l’espace entre deux lignes ;
• stretch (valeur par défaut) : Les lignes vont s’étendre afin d’occuper tout l’espace selon l’axe secondaire du conteneur.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

Ici, on définit plusieurs conteneurs flexibles et on fait en sorte que ces conteneurs soient plus grands que l’ensemble des lignes qu’ils contiennent afin qu’il reste de l’espace à distribuer selon leur axe secondaire. On distribue ensuite cet espace avec align-content.

Tableau récapitulatif des propriétés du flexbox CSS