L'affichage des éléments : Bootstrap display et display : flex

Bootstrap nous fournit un ensemble de classes nous permettant de changer la valeur de la propriété display (c’est-à-dire le type d’affichage) de nos éléments.

Les classes permettant de gérer le type d’affichage des éléments

Les classes permettant de définir le type d’affichage d’un élément sont responsives et vont pouvoir être construites en utilisant le schéma suivant :

.d-{valeur} pour appliquer un type d’affichage à toutes les tailles d’écran ;
.d-{breakpoint}-{valeur} pour appliquer un type d’affichage à une taille d’écran en particulier. Les breakpoints vont être comme d’habitude représentés par : sm, md, lg et xl.

Les valeurs que l’on va pouvoir utiliser sont les suivantes :

none : l’élément aura display: none ;
inline : l’élément aura display: inline ;
block : l’élément aura display: block ;
inline-block : l’élément aura display: inline-block ;
table : l’élément aura display: table ;
table-cell : l’élément aura display: table-cell ;
table-row : l’élément aura display: table-row ;
flex : l’élément aura display: flex ;
inline-flex : l’élément aura display: inline-flex.

Vous devriez normalement déjà bien connaitre les comportements liés à chacune de ces valeurs. Si ce n’est pas le cas, je vous invite à lire mon article sur le sujet.

Pour rappel, un élément avec un display: inline s’affichera en ligne et pourra laisser d’autres éléments se positionner à ses côtés tandis qu’un élément avec un display: block aura un affichage en bloc et occupera sa propre ligne.

En attribuant un display : inline-block a un élément, l’élément en soi va être de niveau inline (l’outer display est inline) tandis que le contenu de l’élément va se comporter comme un block.

Un élément avec un display: none ne sera pas affiché et l’espace qu’il occupe normalement dans la page sera réatribué, display: inline, display: block et display: inline-block.

Les valeurs d’affichage display: table, display: table-row et display: table-cell vont forcer des éléments HTML à se comporter comme des éléments table, tr et td. Ces valeurs sont en pratique très peu utilisées.

Enfin, les valeurs display: flex et display: inline-flex vont permettre de définir des éléments comme conteneurs flexibles. Dans le cas d’un display: flex, le conteneur flexible se comportera comme un élément de niveau block. Dans le cas d’un display: inline-flex, le conteneur flexible se comportera comme un élément de niveau inline. Dans les deux cas, le comportement des éléments flexibles (éléments enfants direct du conteneur) va être le même : ce seront des « flex items » ou « éléments flexibles ».

See the Pen
Bootstrap 2.7.1 by Pierre (@pierregiraud)
on CodePen.

Les classes liées aux types de display : flex

Bien que le modèle de grilles de Bootstrap 4 repose sur le flexbox et que cette version de Bootstrap ait été développée en plaçant l’affichage pour mobiles au centre, tous les éléments HTML n’héritent pas automatiquement d’un display : flex avec Bootstrap puisque cela n’aurait tout simplement aucun sens.

En revanche, Boostrap nous laisse la possibilité de transformer nos éléments en conteneurs flexibles grâce aux classes .d-flex et .d-inline-flex.

Notez que les classes de type .d-flex vont parfaitement supporter l’utilisation des breakpoints afin de rendre l’affichage de nos éléments totalement responsive.

Bootstrap nous permet également de contrôler précisément le comportement des éléments de type display: flex et de leurs enfants grâce à de nombreuses classes qui vont nous permettre de choisir la direction des éléments flex, leur alignement, ordre, etc.

Pour la suite de cette leçon, je pars du principe que vous avez déjà une bonne connaissance du flexbox et n’expliquerai donc pas forcément tous les concepts liés à ce modèle mais simplement comment on va pouvoir gérer nos éléments flex avec Bootstrap.

Les classes Bootstrap permettant de gérer la direction des éléments flex

Nous allons pouvoir définir les directions horizontale et verticale des éléments flex d’un conteneur flex grâce aux classes suivantes :

.flex-row : définit la direction des éléments flex comme horizontale. Valeur par défaut. Les éléments vont commencer à gauche du conteneur vers la droite par défaut ;
.flex-row-reverse : définit la direction des éléments flex comme horizontale. Inverse de .flex-row : les éléments commenceront à droite de leur conteneur et se placeront de droite à gauche par défaut ;
.flex-column : définit la direction des éléments flex comme verticale. Les éléments se placeront de haut en bas par défaut ;
.flex-column-reverse : définit la direction des éléments flex comme verticale. Inverse de .flex-column : Les éléments se placeront en partant du bas du conteneur et vers le haut par défaut.

Notez également que ces classes vont parfaitement supporter le responsive et l’utilisation des breakpoints. On écrira alors : .flex-{breakpoint}-*.

See the Pen
Bootstrap 2.7.2 by Pierre (@pierregiraud)
on CodePen.

Les quatre premiers exemples sont très simples à comprendre ici. Dans le dernier, nous définissons un affichage flex dans le sens vertical pour les petits écrans puis horizontal à partir du breakpoint lg.

Les classes Bootstrap permettant de gérer l’alignement des éléments flex sur l’axe principal

Les classes Bootstrap de type .justify-content-* vont nous permettre de modifier l’alignement des éléments flex le long de leur axe principal qui sera l’axe horizontal par défaut ou l’axe vertical si on a définit un flex-direction: column pour le conteneur.

Nous allons donc pouvoir choisir parmi les classes suivantes :

.justify-content-start : les élément flex se placent de façon à ce que le premier élément soit au début du conteneur (à gauche ou en haut par défaut) ;
.justify-content-end : les élément flex se placent de façon à ce que le dernier élément soit à la fin du conteneur (à droite ou en bas par défaut). Notez que l’ordre des éléments n’est pas modifié ici ;
.justify-content-center : les élément flex sont centrés dans le conteneur (en largeur si l’axe principal est horizontal, en hauteur si l’axe principal est l’axe vertical) ;
.justify-content-between : les éléments flex vont être distribués de manière équitable dans le conteneur. Le premier élément sera collé au début du conteneur et le dernier élément sera collé à la fin du conteneur ;
.justify-content-around : les éléments flex vont être distribués de manière équitable dans le conteneur.

Notez que les classes .justify-content-* vont également supporter l’usage des breakpoints pour définir un comportement responsive pour nos éléments flex. Il faudra alors écrire les classes de cette manière : .justify-content-{breakpoint}-*.

See the Pen
Bootstrap 2.7.3 by Pierre (@pierregiraud)
on CodePen.

Lisez bien les commentaires des exemples précédents pour les comprendre !

Les classes Bootstrap permettant de gérer l’alignement des éléments flex sur l’axe secondaire

L’axe secondaire est l’axe opposé à l’axe principal. Ce sera donc l’axe vertical si l’axe principal des éléments flex défini est l’axe horizontal et l’axe horizontal si l’axe principal des éléments flex est l’axe vertical.

Nous allons pouvoir procéder de différentes manières pour aligner les éléments flex le long de leur axe secondaire :

Nous allons pouvoir aligner tous les éléments d’une ligne en même temps avec align-items ;
On va pouvoir aligner les éléments au cas par cas avec align-self ;
Nous allons pouvoir aligner les lignes les unes par rapport aux autres avec align-content.

Aligner les éléments d’une ligne avec align-items

Nous allons pouvoir utiliser les classes Bootstrap .align-items-* pour contrôler l’alignement de tous les éléments d’un coup dans un ligne selon leur axe secondaire. Pour cela, nous allons pouvoir choisir parmi les classes suivantes :

.align-items-start : les éléments seront alignés en partant du début selon leur axe secondaire ;
.align-items-end : les éléments seront alignés en partant de la fin selon leur axe secondaire ;
.align-items-center : les éléments seront centrés selon leur axe secondaire ;
.align-items-baseline : les éléments seront alignés par rapport à la ligne de base dans l’axe secondaire ;
.align-items-stretch : valeur par défaut. Les éléments vont tenter de s’étendre dans l’axe secondaire de manière à remplir leur conteneur.

Notez que ces classes supportent également très bien l’utilisation des breakpoint et vont donc pouvoir être utilisées pour créer des designs adaptables (responsive).

See the Pen
Bootstrap 2.7.4 by Pierre (@pierregiraud)
on CodePen.

Ici, l’axe principal pour les éléments flex de nos 5 premiers div conteneurs est l’axe horizontal puisque nous ne précisons rien (la valeur par défaut sera donc flex-row. Les classes .align-items-* vont donc aligner tous les éléments ensemble selon l’axe vertical (axe secondaire). Les éléments positionnés avec align-items-start vont donc venir se positionner en haut du conteneur.

Pour les éléments de nos 5 derniers div, en revanche, nous précisons un axe principal vertical avec flex-column. L’axe secondaire sera donc cette fois-ci horizontal. Ainsi, les éléments positionnés avec align-items-start par exemple vont tous venir se placer à gauche dans leur conteneur.

Aligner les éléments au cas par cas avec align-self

Nous allons également pouvoir aligner les éléments flex selon leur axe secondaire un à un en utilisant cette fois-ci les classes Bootstrap .align-self-*.

Nous allons pouvoir choisir parmi les mêmes options que pour align-items-*, à savoir :

.align-self-start : l’élément sera aligné en partant du début selon son axe secondaire ;
.align-self-end : l’élément sera aligné en partant de la fin selon son axe secondaire ;
.align-self-center : l’élément sera centré selon son axe secondaire ;
.align-self-baseline : l’élément sera aligné par rapport à la ligne de base dans l’axe secondaire ;
.align-self-stretch : valeur par défaut. L’élément va tenter de s’étendre dans l’axe secondaire de manière à remplir son conteneur.

Les classes .self-align-* vont nous permettre d’aligner les éléments un à un. Nous allons donc devoir appliquer ces classes sur les éléments flex en particulier et non pas sur le conteneur.

Notez que les classes Bootstrap .align-self-* vont également supporter l’utilisation des breakpoints pour créer des design totalement responsive.

See the Pen
Bootstrap 2.7.5 by Pierre (@pierregiraud)
on CodePen.

Aligner tous les éléments (plusieurs lignes à la fois) avec align-content

Les classes Bootstrap .align-content-* vont nous permettre d’aligner les éléments flex tous ensemble selon leur axe secondaire. Notez que cette classe va agir sur les lignes en forçant l’alignement des éléments de différentes lignes les uns par rapport aux autres.

Il ne faut pas donc pas confondre .align-items-* et .align-content-* : la première va aligner tous les éléments d’un ligne, tandis que la seconde va aligner tous les éléments sur plusieurs lignes les uns par rapport aux autres. Par ailleurs, notez que .align-content-* n’aura aucun effet si tous les éléments flex sont sur une seule ligne.

Nous allons ici pouvoir choisir parmi les classes :

align-content-start : Valeur par défaut. Les éléments vont être collés (par ligne) au début de leur conteneur selon leur axe secondaire ;
align-content-end : les éléments vont être collés (par ligne) à la fin de leur conteneur selon leur axe secondaire ;
align-content-center : les éléments vont être centrés (par ligne) dans leur conteneur selon leur axe secondaire;
align-content-between : les éléments vont être répartis équitablement (par ligne) dans leur conteneur selon leur axe secondaire. La première ligne d’élément sera collée au début du conteneur tandis que la dernière ligne sera collée à la fin (selon l’axe secondaire toujours) ;
align-content-around : es éléments vont être répartis équitablement (par ligne) dans leur conteneur selon leur axe secondaire ;
align-content-stretch : les éléments dans chaque ligne vont s’étirer pour prendre le maximum de place disponible dans leur conteneur selon l’axe secondaire.

Nous allons appliquer ces différentes classes au conteneur. Notez que ces classes Bootstrap vont également supporter l’utilisation des breakpoint et nous permettre donc de créer des designs responsive.

Dans les exemples suivants, notez que je donne une largeur suffisamment grande à mes éléments flex pour que l’ensemble occupe plus d’une ligne et que j’utilise également la classe Bootstrap .flex-wrap pour forcer les éléments qui dépassent de leur conteneur à aller sur une nouvelle ligne. Cela est nécessaire pour vous montrer l’effet de align-content-*.

See the Pen
Bootstrap 2.7.6 by Pierre (@pierregiraud)
on CodePen.

Gestion de l’espace disponible avec flex-fill

La classe Bootstrap .flex-fill va forcer une série d’éléments flex à occuper toute la largeur disponible dans leur conteneur. La largeur disponible sera distribuée de manière équitable entre les différents élément flex possédant une classe .flex-fill et en fonction de leur contenu. Notez que cette classe supporte l’usage des breakpoint. Nous allons donc pouvoir l’utiliser de manière responsive.

See the Pen
Bootstrap 2.7.7 by Pierre (@pierregiraud)
on CodePen.

Gérer l’espace pris par un élément avec flex-grow et flex-shrink

Les classes Bootstrap .flex-grow-* vont nous permettre de définir si un élément flex en particulier va pouvoir grandir jusqu’à occuper tout l’espace disponible dans son conteneur ou pas. Nous allons pouvoir choisir entre :

.flex-grow-0 : l’élément ne peut pas grandir pour occuper tout l’espace disponible ;
.flex-grow-1 : l’élément peut grandir pour occuper tout l’espace disponible.

A l’inverse, les classes Bootstrap .flex-shrink vont nous permettre de définir si un élément peut rapetisser si nécessaire ou pas.

.flex-shrink-0 : l’élément ne peut pas rapetisser ;
.flex-shrink-1 : l’élément peut rapetisser si nécessaire ce qui signifie que son contenu va pouvoir occuper plusieurs lignes.

See the Pen
Bootstrap 2.7.8 by Pierre (@pierregiraud)
on CodePen.

Ici, vous pouvez remarquer que lorsqu’on applique la classe .flex-grow-1 à un élément flex, celui-ci va grossir pour occuper toute la place disponible dans son conteneur.

Dans les deux derniers exemples, notez qu’on applique une classe .w-100 au premier élément flex de notre conteneur pour lui demander d’occuper toute la ligne ou du moins toute la place disponible dans la ligne puisqu’il est sur une même ligne avec d’autres éléments flex. Dans le dernier exemple, on va cependant demander au dernier élément flex du conteneur de ne pas rétrécir en lui appliquant une classe .flex-shrink-0.

Les classes Bootstrap permettant de gérer l’ordre (visuel) des éléments flex

Nous allons pouvoir modifier l’ordre visuel, c’est-à-dire l’ordre d’apparition des éléments flex sur notre page grâce aux classes Bootstrap .order-*.

Pour choisir l’ordre d’apparition des différents éléments flex, il suffit de faire suivre .order-* d’un chiffre qui indiquera l’ordre visuel des éléments (0 pour le premier élément, 1 pour le deuxième, 2 pour le troisième, etc.

Notez que les classes Bootstrap .order-* vont supporter l’utilisation des breakpoint et du responsive.

See the Pen
Bootstrap 2.7.9 by Pierre (@pierregiraud)
on CodePen.

Modifier la façon dont les éléments flex sont imbriqués dans un conteneur flex

Nous allons pouvoir gérer la façon dont les éléments flex sont inclus dans leur conteneur en définissant si ils doivent être disposés sur une seule ligne ou si ils peuvent être affichés sur plusieurs lignes. Dans le cas où le retour à la ligne est autorisé, nous allons également pouvoir indiquer la direction dans laquelle les lignes doivent être empilées.

Pour cela, nous allons utiliser les classes Bootstrap suivantes :

.flex-nowrap : classe utilisée par défaut. Les éléments ne peuvent pas aller à la ligne ;
.flex-wrap : les éléments flex peuvent aller à la ligne ;
.flex-wrap-reverse : les éléments flex peuvent aller à la ligne et la direction des lignes va être inversée.

See the Pen
Bootstrap 2.7.10 by Pierre (@pierregiraud)
on CodePen.

Ici, on demande à chaque fois à chacun de nos éléments flex d’occuper 50% de la taille du conteneur avec .w-50. Cependant, dans le premier exemple, .flex-nowrap est appliquée a conteneur ce qui va empêcher nos éléments d’aller à la ligne et donc chaque élément va finalement n’occuper qu’un tiers du conteneur.

En revanche, en modifiant la valeur pour .flex-wrap ou .flex-wrap-reverse, vous pouvez observer que nos différents éléments vont bien occuper chacun 50% de la largeur du conteneur et se positionner à la ligne si besoin.

L’affichage des éléments : Bootstrap display et display : flex