Flex ^commun

Gérez la mise en plage, l'alignement et les dimensions des colonnes et du mécanisme de grid en général. Nous utilisons ici la technique dite Flexbox.
Déclarer un conteneur flexbox induit des comportements sur ses enfants.

Il est possible de préciser la direction row (horizontal) ou column (vertical) à l'agencement des blocs.
La notion de reverse permet d'inverser l'ordre d'affichage (le dernier passe en premier, etc...).

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Possibilité d'interagir sur justify-content pour gérer l'alignement dans l'axe X ou Y.
Pas de gestion via des top / right / bottom / left mais plutôt start, end, center, between et around.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Utilisez align-items pour gérer l'alignement sur l'axe X ou Y (en fonction du mode).
Les choix sont entre start, end, center, baseline et stretch.

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Utilisez align-self pour gérer l'alignement individuel d'un élément
Les choix sont entre start, end, center, baseline et stretch.

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

La classe .flex-fill, lorsqu'elle est apposée sur plusieurs éléments siblings, les contraint à occuper tout l'espace disponible avec une répartition en fonction des contenus.

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Le .flex-grow-* sert à activer/désactiver l'extension d'un élément sur tout l'espace disponible.
Le .flex-shrink-* sert à activer/désactiver la réduction d'un élément pour laisser l'espace disponible aux autres.

<div class="d-flex labo-col-item">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

L'ajout de marge automatique sur des éléments permet des agencements intéressants.
Voici 3 exemples (sans marge auto, marge droite auto sur 1er item et marge gauche sur dernier item).

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

Sur le même principe mais à la vertical en associant align-items, flex-direction:column, et margin-top:auto ou margin-bottom:auto.

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Le flex-wrap permet d'indiquer quel niveau de retour à la ligne l'on souhaite.
Un .flex-nowrap empêche le retour à la ligne et débordera du conteneur.
Un .flex-wrap autorisera le retour.
Le reverse inversera l'ordre d'affichage.

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Il est possible de modifier l'ordre d'affichage des éléments d'un flex en jouant sur le paramètre order.

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Utilisez align-content en complément des utilitaires de flexbox pour aligner les éléments sur l'axe transversal.
Choix de valeur entre start, end, center, between, around et stretch.

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<div class="d-flex align-content-stretch flex-wrap">...</div>

En savoir plus.