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

flex-grow et flex-shrink déterminent comment les éléments ajustent leur taille de manière adaptative à l’intérieur du conteneur flex, lorsqu’il y a de l’espace libre ou insuffisant, respectivement.

flex-grow - détermine le coefficient selon lequel un élément doit augmenter lorsqu’il y a de l’espace libre dans le conteneur. La valeur par défaut est 0 (l’élément ne s’étire pas). Si plusieurs éléments ont flex-grow supérieur à 0, l’espace libre est réparti entre eux proportionnellement à leurs valeurs de flex-grow.

.item {
  flex-grow: 1; /* L’élément utilisera tout l’espace libre disponible */
}

flex-shrink - détermine le coefficient selon lequel un élément doit se compresser lorsqu’il y a un espace insuffisant dans le conteneur. La valeur par défaut est 1 (l’élément se compresse proportionnellement aux autres éléments qui se compressent). Une valeur de 0 empêche la compression de l’élément.

.item {
  flex-shrink: 0; /* L’élément ne se comprimera pas */
}

Avec flex-basis, ils forment la propriété abrégée flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Exemple d’utilisation:

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

.container {
  display: flex;
  width: 400px; /* Exemple de largeur fixe du conteneur */
}

.item {
  flex-basis: 100px; /* Taille de base de tous les éléments */
}

.item-1 {
  flex-grow: 1; /* Item 1 utilisera l’espace libre */
}

.item-2 {
  flex-shrink: 0; /* Item 2 ne sera pas comprimé */
}

Si le conteneur est plus large que 200px (100px + 100px), item-1 occupera tout l’espace libre restant. Si le conteneur fait déjà 200px, item-2 conservera sa taille de base de 100px, et item-1 sera comprimé.

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