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

flex-grow détermine dans quelle mesure un élément peut augmenter lorsqu'il y a de l'espace libre dans le conteneur. Une valeur de 0 (par défaut) signifie que l'élément ne s'agrandira pas. Les valeurs positives indiquent un coefficient de croissance par rapport aux autres éléments flex dans la même ligne.

flex-shrink détermine dans quelle mesure un élément peut se réduire en cas de manque d'espace libre dans le conteneur. Une valeur de 1 (par défaut) signifie qu'il peut se réduire. Une valeur de 0 interdit la réduction. Les valeurs positives indiquent un coefficient de réduction par rapport aux autres éléments flex.

Voyons un exemple :

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Largeur du conteneur */
}

.item {
  flex-basis: 100px; /* Taille de base de chaque élément */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Occupera 1 part de l'espace libre */
  flex-shrink: 0; /* Ne se réduira pas */
}

.item-2 {
  flex-grow: 2; /* Occupera 2 parts de l'espace libre */
  flex-shrink: 1; /* Peut se réduire */
}

.item-3 {
  flex-grow: 1; /* Occupera 1 part de l'espace libre */
  flex-shrink: 1; /* Peut se réduire */
}

Dans ce cas, la taille de base totale des éléments est de 300px (3 * 100px). L'espace libre est de 100px (400px - 300px). Cet espace sera réparti entre les éléments 1, 2 et 3 en proportion de leurs flex-grow : 1 + 2 + 1 = 4. L'élément 1 recevra 1/4 * 100px = 25px d'espace supplémentaire. L'élément 2 recevra 2/4 * 100px = 50px d'espace supplémentaire. L'élément 3 recevra 1/4 * 100px = 25px d'espace supplémentaire.

Leurs tailles finales seront : Élément 1 : 100px + 25px = 125px Élément 2 : 100px + 50px = 150px Élément 3 : 100px + 25px = 125px

Si la largeur du conteneur était insuffisante (par exemple, 200px), une compression serait nécessaire. En cas de manque d'espace pour la compression, flex-shrink et la taille des éléments sont pris en compte. L'espace manquant est réparti pour la compression entre les éléments dont flex-shrink est supérieur à 0, en proportion de leur flex-shrink multiplié par leur taille actuelle (après flex-basis). L'algorithme de compression est un peu plus complexe, mais l'idée principale est que les éléments avec un flex-shrink plus élevé ou une taille actuelle plus grande seront compressés davantage.

Il est important de se rappeler que flex-basis, flex-grow et flex-shrink sont souvent utilisés ensemble comme propriété raccourcie flex. Par exemple, flex: 1 1 auto; équivaut à flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorité dans la répartition de l'espace :

flex-basis : Définit la taille initiale de l'élément.
flex-grow : Répartit l'espace libre positif.
flex-shrink : Répartit l'espace libre négatif (besoin de compression).

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