Flex-shrink en CSS - Comment gérer la réduction des éléments flex comme un pro

Tu galères à comprendre pourquoi tes éléments flex se réduisent de manière bizarre ? Tu veux savoir comment contrôler précisément la réduction de tes éléments quand l'espace manque ? Tu es au bon endroit !

Dans cet article, on va plonger dans flex-shrink, la propriété CSS qui gère la réduction des éléments flex. Je vais t'expliquer son fonctionnement avec des exemples concrets et interactifs.

C'est quoi flex-shrink ?

flex-shrink est comme le petit frère opposé de flex-grow. Alors que flex-grow définit comment les éléments grandissent, flex-shrink définit comment ils rétrécissent quand il n'y a pas assez d'espace.

La valeur par défaut est 1, ce qui signifie que tous les éléments vont rétrécir de manière égale. Plus la valeur est élevée, plus l'élément va rétrécir rapidement.

Le concept de réduction

Imagine que tu as trois boîtes dans un conteneur. Quand l'espace est suffisant, tout va bien. Mais que se passe-t-il quand l'espace se réduit ?

Dans cet exemple :

• La boîte rouge a flex-shrink: 2 - elle rétrécit deux fois plus vite
• Les boîtes bleue et jaune ont flex-shrink: 1 - elles rétrécissent normalement

Comment ça marche concrètement ?

Le calcul de flex-shrink est un peu plus complexe que flex-grow. Il prend en compte :

1. La valeur de flex-shrink
2. La taille de base de l'élément
3. L'espace manquant dans le conteneur

Prenons un exemple plus concret :

Dans cet exemple :

• La boîte rouge est plus large (300px) et a un flex-shrink plus élevé (3)
• La boîte bleue est plus petite (150px) avec un flex-shrink normal (1)

Quand l'espace manque :

1. La boîte rouge rétrécit plus vite car elle a un flex-shrink plus élevé
2. Elle rétrécit encore plus car sa taille de base est plus grande

Le piège commun avec flex-shrink

L'erreur la plus courante est de penser que flex-shrink: 0 est mauvais. En fait, c'est super utile ! Ça permet d'empêcher un élément de rétrécir.

Regarde cet exemple de navbar avec des boutons qui ne doivent pas rétrécir :

Ici :

• Le logo et les boutons ont flex-shrink: 0 pour garder leur taille
• Le menu a flex-shrink: 1 pour s'adapter à l'espace disponible

La solution ultime : flex shorthand

Comme pour flex-grow, la meilleure approche est souvent d'utiliser le shorthand flex :

/* Élément qui ne rétrécit jamais */
.element {
  flex: 0 0 auto;
}

/* Élément qui rétrécit normalement */
.element {
  flex: 1 1 auto;
}

/* Élément qui rétrécit beaucoup */
.element {
  flex: 1 2 auto;
}

Le shorthand flex définit dans l'ordre :

1. flex-grow
2. flex-shrink
3. flex-basis

Cas d'usage pratiques

1. Galerie d'images responsive

Un cas classique est une galerie d'images qui s'adapte à l'espace :

2. Formulaire responsive

Un formulaire qui s'adapte à l'espace disponible :

Les bonnes pratiques avec flex-shrink

1. Utilise flex-shrink: 0 pour les éléments fixes : Parfait pour les logos, boutons, etc.
2. Laisse flex-shrink: 1 pour les contenus adaptables : Idéal pour les textes, images responsives
3. Combine avec min-width ou min-height : Pour éviter une réduction excessive
4. Pense mobile-first : Teste toujours comment tes éléments se comportent sur petit écran

Compatibilité des navigateurs

Bonne nouvelle ! flex-shrink est super bien supporté :

• Chrome 29+
• Firefox 20+
• Safari 9+
• Edge 12+

Pour aller plus loin

Si tu veux devenir un expert en flexbox, je te conseille :

1. Le guide complet de Flexbox
2. Tout savoir sur flex-grow
3. Apprendre Tailwind CSS

Tu peux aussi t'inscrire à mon cours gratuit sur Tailwind et CSS :