Comment fonctionnent les propriétés flex-grow et…

flex-grow et flex-shrink contrôlent comment les éléments flex répartissent l'espace libre à l'intérieur du conteneur flex.

flex-grow:

Détermine quelle partie de l'espace libre disponible dans le conteneur flex l'élément occupera, s'il y a de l'espace libre.
Par défaut flex-grow: 0, ce qui signifie que l'élément ne grandit pas.
Valeur - nombre non négatif.
Si plusieurs éléments ont flex-grow supérieur à 0, l'espace libre est réparti entre eux en proportion de leurs valeurs de flex-grow.

flex-shrink:

Détermine dans quelle mesure l'élément sera comprimé si l'espace disponible dans le conteneur flex est inférieur à la somme des tailles de base de tous les éléments flex.
Par défaut flex-shrink: 1, ce qui signifie que l'élément peut se compresser.
Valeur - nombre non négatif.
Plus la valeur de flex-shrink est grande, plus l'élément se comprimera par rapport aux autres éléments avec une valeur inférieure.
Lors de la compression, la largeur de base de l'élément (flex-basis ou width) est prise en compte.

Exemple:

.conteneur {
  display: flex;
  width: 500px;
  /* Largeur totale du conteneur */
}

.element {
  flex-basis: 100px;
  /* Largeur de base de chaque élément */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Valeurs par défaut */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Ne se comprime pas */
}

.element:nth-child(3) {
  flex-grow: 0; /* Ne grandit pas */
  flex-shrink: 2; /* Se comprime davantage */
}

Si la somme des largeurs de base (300px) est inférieure à la largeur du conteneur (500px), l'espace restant (200px) sera réparti entre le premier et le deuxième élément selon le ratio flex-grow 1:2.

Si la somme des largeurs de base est supérieure à la largeur du conteneur, les éléments seront comprimés selon leurs valeurs de flex-shrink et leurs tailles de base. L'élément avec flex-shrink: 0 ne sera pas comprimé.

Comment fonctionnent les propriétés flex-grow et flex-shrink?