Utilitaires

Flex

Les utilitaires Flex pilotent la disposition d’un conteneur Flexbox et de ses enfants : direction, alignement, répartition, retour à la ligne, ordre et croissance. Presque tous existent en version responsive.

Activer Flex#

d-flex fait du conteneur un bloc Flex ; d-inline-flex en fait un conteneur en ligne. Leurs enfants directs deviennent des éléments Flex.

Compte courant

Compte épargne

Compte projet

En ligne 1

En ligne 2

<div class="d-flex gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2">Compte courant</div>
  <div class="bg-body border p-2">Compte épargne</div>
  <div class="bg-body border p-2">Compte projet</div>
</div>
<div class="d-inline-flex gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2">En ligne 1</div>
  <div class="bg-body border p-2">En ligne 2</div>
</div>

Direction#

Les variantes -reverse inversent l’ordre visuel, pas l’ordre dans le code ni l’ordre de tabulation.

<div class="d-flex flex-row gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2">1</div><div class="bg-body border p-2">2</div><div class="bg-body border p-2">3</div>
</div>
<div class="d-flex flex-row-reverse gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2">1</div><div class="bg-body border p-2">2</div><div class="bg-body border p-2">3</div>
</div>
<div class="d-flex flex-column gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2">1</div><div class="bg-body border p-2">2</div><div class="bg-body border p-2">3</div>
</div>
<div class="d-flex flex-column-reverse gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2">1</div><div class="bg-body border p-2">2</div><div class="bg-body border p-2">3</div>
</div>

Répartition sur l'axe principal#

justify-content-* répartit les éléments le long de la direction du conteneur.

start

end

center

between

around

evenly

<div class="d-flex justify-content-start bg-body-secondary border p-3 mb-2"><div class="bg-body border p-2">start</div><div class="bg-body border p-2">start</div></div>
<div class="d-flex justify-content-end bg-body-secondary border p-3 mb-2"><div class="bg-body border p-2">end</div><div class="bg-body border p-2">end</div></div>
<div class="d-flex justify-content-center bg-body-secondary border p-3 mb-2"><div class="bg-body border p-2">center</div><div class="bg-body border p-2">center</div></div>
<div class="d-flex justify-content-between bg-body-secondary border p-3 mb-2"><div class="bg-body border p-2">between</div><div class="bg-body border p-2">between</div><div class="bg-body border p-2">between</div></div>
<div class="d-flex justify-content-around bg-body-secondary border p-3 mb-2"><div class="bg-body border p-2">around</div><div class="bg-body border p-2">around</div><div class="bg-body border p-2">around</div></div>
<div class="d-flex justify-content-evenly bg-body-secondary border p-3"><div class="bg-body border p-2">evenly</div><div class="bg-body border p-2">evenly</div><div class="bg-body border p-2">evenly</div></div>

Alignement sur l'axe secondaire#

align-items-* aligne tous les éléments perpendiculairement à la direction. Le conteneur a ici une hauteur fixe pour que l’effet se voie.

start

end

center

baseline

stretch

<div class="d-flex align-items-start bg-body-secondary border p-3 mb-2" style="height: 6rem;"><div class="bg-body border p-2">start</div><div class="bg-body border p-2">start</div></div>
<div class="d-flex align-items-end bg-body-secondary border p-3 mb-2" style="height: 6rem;"><div class="bg-body border p-2">end</div><div class="bg-body border p-2">end</div></div>
<div class="d-flex align-items-center bg-body-secondary border p-3 mb-2" style="height: 6rem;"><div class="bg-body border p-2">center</div><div class="bg-body border p-2">center</div></div>
<div class="d-flex align-items-baseline bg-body-secondary border p-3 mb-2" style="height: 6rem;"><div class="bg-body border p-2">baseline</div><div class="bg-body border p-2 fs-3">baseline</div></div>
<div class="d-flex align-items-stretch bg-body-secondary border p-3" style="height: 6rem;"><div class="bg-body border p-2">stretch</div><div class="bg-body border p-2">stretch</div></div>

Alignement d'un seul élément#

align-self-* écrase align-items pour un enfant.

start

center

end

baseline

stretch

<div class="d-flex bg-body-secondary border p-3" style="height: 8rem;">
  <div class="bg-body border p-2 align-self-start">start</div>
  <div class="bg-body border p-2 align-self-center">center</div>
  <div class="bg-body border p-2 align-self-end">end</div>
  <div class="bg-body border p-2 align-self-baseline">baseline</div>
  <div class="bg-body border p-2 align-self-stretch">stretch</div>
</div>

Remplir la largeur et croissance#

flex-fill force les éléments à partager la largeur disponible. flex-grow-1 laisse un élément absorber l’espace libre, flex-shrink-0 l’empêche de rétrécir.

flex-fill

flex-grow-1

Taille du contenu

flex-shrink-0 : ne rétrécit pas

flex-shrink-1

<div class="d-flex gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2 flex-fill">flex-fill</div>
  <div class="bg-body border p-2 flex-fill">flex-fill</div>
  <div class="bg-body border p-2 flex-fill">flex-fill</div>
</div>
<div class="d-flex gap-2 bg-body-secondary border p-3 mb-3">
  <div class="bg-body border p-2 flex-grow-1">flex-grow-1</div>
  <div class="bg-body border p-2">Taille du contenu</div>
</div>
<div class="d-flex gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2 flex-shrink-0">flex-shrink-0 : ne rétrécit pas</div>
  <div class="bg-body border p-2 flex-shrink-1">flex-shrink-1</div>
</div>

Retour à la ligne#

Par défaut, les éléments restent sur une ligne (flex-nowrap). flex-wrap les laisse passer à la ligne suivante.

Virements

Prélèvements

Cartes

Épargne

Crédits

Agences

<div class="d-flex flex-wrap gap-2 bg-body-secondary border p-3" style="max-width: 24rem;">
  <div class="bg-body border p-2">Virements</div>
  <div class="bg-body border p-2">Prélèvements</div>
  <div class="bg-body border p-2">Cartes</div>
  <div class="bg-body border p-2">Épargne</div>
  <div class="bg-body border p-2">Crédits</div>
  <div class="bg-body border p-2">Agences</div>
</div>

Alignement des lignes#

align-content-* répartit les lignes d’un conteneur à plusieurs lignes (flex-wrap) quand il est plus haut que son contenu.

<div class="d-flex flex-wrap align-content-between gap-2 bg-body-secondary border p-3" style="height: 10rem; max-width: 20rem;">
  <div class="bg-body border p-2">1</div><div class="bg-body border p-2">2</div><div class="bg-body border p-2">3</div>
  <div class="bg-body border p-2">4</div><div class="bg-body border p-2">5</div><div class="bg-body border p-2">6</div>
  <div class="bg-body border p-2">7</div><div class="bg-body border p-2">8</div><div class="bg-body border p-2">9</div>
</div>

Ordre d'affichage#

order-* change la place visuelle d’un élément, de order-0 à order-5, avec order-first (−1) et order-last (6).

Premier dans le code, 3e à l'écran

Deuxième, 1er à l'écran

Troisième, 2e à l'écran

<div class="d-flex gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2 order-3">Premier dans le code, 3e à l'écran</div>
  <div class="bg-body border p-2 order-1">Deuxième, 1er à l'écran</div>
  <div class="bg-body border p-2 order-2">Troisième, 2e à l'écran</div>
</div>

Marges automatiques#

Une marge auto absorbe l’espace libre. ms-auto pousse un élément vers la fin, me-auto le garde au début.

Mon espace

Déconnexion

Accueil

Comptes

Aide

<div class="d-flex align-items-center bg-body-secondary border p-3 mb-2">
  <div class="bg-body border p-2">Mon espace</div>
  <div class="bg-body border p-2 ms-auto">Déconnexion</div>
</div>
<div class="d-flex align-items-center bg-body-secondary border p-3">
  <div class="bg-body border p-2">Accueil</div>
  <div class="bg-body border p-2 me-auto">Comptes</div>
  <div class="bg-body border p-2">Aide</div>
</div>

Disposition responsive#

Les éléments s’empilent sur mobile, puis se placent en ligne à partir de 768 px. Chaque utilitaire Flex accepte les suffixes -sm à -xxl.

Simulateur de prêt

Montant : 5 000 000 FCFA

Durée : 24 mois

<div class="d-flex flex-column flex-md-row justify-content-md-between gap-2 bg-body-secondary border p-3">
  <div class="bg-body border p-2">Simulateur de prêt</div>
  <div class="bg-body border p-2">Montant : 5 000 000 FCFA</div>
  <div class="bg-body border p-2">Durée : 24 mois</div>
</div>

Conteneur : classes

Conteneur : classes
Propriété	Classes
`display`	`d-flex` `d-inline-flex`
`flex-direction`	`flex-row` `flex-row-reverse` `flex-column` `flex-column-reverse`
`flex-wrap`	`flex-nowrap` `flex-wrap` `flex-wrap-reverse`
`justify-content`	`justify-content-start` `justify-content-end` `justify-content-center` `justify-content-between` `justify-content-around` `justify-content-evenly`
`align-items`	`align-items-start` `align-items-end` `align-items-center` `align-items-baseline` `align-items-stretch`
`align-content`	`align-content-start` `align-content-end` `align-content-center` `align-content-between` `align-content-around` `align-content-stretch`

Éléments : classes

Éléments : classes
Propriété	Classes
`flex`	`flex-fill`
`flex-grow`	`flex-grow-0` `flex-grow-1`
`flex-shrink`	`flex-shrink-0` `flex-shrink-1`
`align-self`	`align-self-auto` `align-self-start` `align-self-end` `align-self-center` `align-self-baseline` `align-self-stretch`
`order`	`order-first` `order-0` `order-1` `order-2` `order-3` `order-4` `order-5` `order-last`

Variantes responsives

Toutes les classes ci-dessus, sauf d-flex et d-inline-flex qui ont leur propre famille (d-md-flex), existent avec un suffixe de point de rupture placé après la propriété.

Variantes responsives
Suffixe	Exemples
`-sm`	`flex-sm-row` `flex-sm-column` `flex-sm-wrap` `flex-sm-fill` `flex-sm-grow-1` `flex-sm-shrink-0` `justify-content-sm-between` `align-items-sm-center` `align-content-sm-end` `align-self-sm-start` `order-sm-first` `order-sm-3`
`-md`	`flex-md-row` `flex-md-column` `flex-md-wrap` `flex-md-fill` `flex-md-grow-1` `flex-md-shrink-0` `justify-content-md-between` `align-items-md-center` `align-content-md-end` `align-self-md-start` `order-md-first` `order-md-3`
`-lg`	`flex-lg-row` `flex-lg-column` `flex-lg-wrap` `flex-lg-fill` `flex-lg-grow-1` `flex-lg-shrink-0` `justify-content-lg-between` `align-items-lg-center` `align-content-lg-end` `align-self-lg-start` `order-lg-first` `order-lg-3`
`-xl`	`flex-xl-row` `flex-xl-column` `flex-xl-wrap` `flex-xl-fill` `flex-xl-grow-1` `flex-xl-shrink-0` `justify-content-xl-between` `align-items-xl-center` `align-content-xl-end` `align-self-xl-start` `order-xl-first` `order-xl-3`
`-xxl`	`flex-xxl-row` `flex-xxl-column` `flex-xxl-wrap` `flex-xxl-fill` `flex-xxl-grow-1` `flex-xxl-shrink-0` `justify-content-xxl-between` `align-items-xxl-center` `align-content-xxl-end` `align-self-xxl-start` `order-xxl-first` `order-xxl-3`

Variables Sass

Variables Sass
Clé de `$utilities`	Classes générées
`"flex"`	`flex-fill`
`"flex-direction"`	`flex-row`, `flex-column`…
`"flex-grow"`, `"flex-shrink"`	`flex-grow-0`, `flex-grow-1`, `flex-shrink-0`, `flex-shrink-1`
`"flex-wrap"`	`flex-wrap`, `flex-nowrap`, `flex-wrap-reverse`
`"justify-content"`, `"align-items"`, `"align-content"`, `"align-self"`	Familles `justify-content-`, `align-items-`, `align-content-`, `align-self-`
`"order"`	`order-first`, `order-0` à `order-5`, `order-last`

Bonnes pratiques

À faire

Combinez d-flex avec gap-* pour espacer les éléments, plutôt qu’avec des marges sur chaque enfant.
Utilisez flex-wrap dès que le nombre d’éléments peut dépasser la largeur d’un petit écran.
Préférez la grille pour une mise en page en colonnes alignées sur plusieurs lignes (page Mise en page, « Grille »).

À éviter

N’oubliez pas d-flex : les autres classes Flex n’ont aucun effet sans lui.
N’utilisez pas order-* ou flex-*-reverse pour changer l’ordre logique d’un contenu : seul l’écran change.
Ne comptez pas sur align-items-* sans hauteur supplémentaire : le conteneur épouse son contenu.

Accessibilité

L’ordre visuel modifié par order-* ou *-reverse ne change pas l’ordre de lecture ni de tabulation : gardez un ordre cohérent dans le code.
Évitez de réordonner des formulaires, des étapes ou des listes numérotées avec ces classes.