Comment peut-on modifier de manière flexible la…

Il est possible de modifier la taille des éléments dans flexbox de manière flexible en utilisant les propriétés flex-grow, flex-shrink et flex-basis.

flex-grow : Détermine dans quelle mesure un élément peut s’étirer, en occupant l’espace libre dans le conteneur. La valeur par défaut est 0 (ne s’étire pas). Une valeur plus élevée indique un coefficient d’étirement plus grand par rapport aux autres éléments.
flex-shrink : Détermine dans quelle mesure un élément peut se compresser en cas de manque d’espace libre. La valeur par défaut est 1 (se compresse). Une valeur plus élevée indique un coefficient de compression plus grand.
flex-basis : Détermine la taille de base de l’élément avant la distribution de l’espace libre. Peut être une valeur fixe (px, %, rem) ou un mot-clé (auto, content).

Ces trois propriétés sont souvent combinées dans la propriété abrégée flex : flex: <flex-grow> <flex-shrink> <flex-basis>;.

Exemples d’utilisation :

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

/* L’élément ne se comprimera pas en cas de manque d’espace */
.flex-item {
  flex-shrink: 0;
}

/* L’élément a une taille de base de 100px et s’étend s’il y a de la place */
.flex-item {
  flex: 1 1 100px;
}

/* L’élément a une taille de base définie par son contenu et peut se compresser */
.flex-item {
  flex: 0 1 auto; /* Équivalent à flex: initial; */
}

/* L’élément ne s’étire pas, ne se compresse pas et a une taille de base définie par son contenu */
.flex-item {
  flex: 0 0 auto; /* Équivalent à flex: none; */
}

/* L’élément s’étire, se compresse et a une taille de base de 0 (pratique pour créer des éléments de même largeur) */
.flex-item {
  flex: 1 1 0; /* Équivalent à flex: auto; */
}

L’utilisation de ces propriétés permet de gérer précisément le comportement des éléments dans un conteneur flex lors du changement de taille de l’écran ou du contenu.

Comment peut-on modifier de manière flexible la taille des éléments utilisant flexbox?