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

28/01/2025 • Melvynx

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 ?

<style>
  .container {
    display: flex;
    border: 2px solid #1e293b;
    padding: 1rem;
    gap: 0.5rem;
    margin: 1rem;
    width: 100%;
    transition: width 0.3s ease;
  }

  .box {
    padding: 1rem;
    border: 2px solid;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
  }

  .box.red {
    background-color: rgba(239, 68, 68, 0.5);
    border-color: #ef4444;
    flex-shrink: 2;
  }

  .box.blue {
    background-color: rgba(59, 130, 246, 0.5);
    border-color: #3b82f6;
    flex-shrink: 1;
  }

  .box.yellow {
    background-color: rgba(234, 179, 8, 0.5);
    border-color: #eab308;
    flex-shrink: 1;
  }
</style>

<div class="container">
  <div class="box red">flex-shrink: 2</div>
  <div class="box blue">flex-shrink: 1</div>
  <div class="box yellow">flex-shrink: 1</div>
</div>

<p style="text-align: center; margin-top: 1rem;">👆 Redimensionne la fenêtre pour voir l"effet</p>

Open Sandbox

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 :

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

Prenons un exemple plus concret :

<style>
  .container {
    display: flex;
    border: 2px solid #1e293b;
    padding: 1rem;
    gap: 0.5rem;
    margin: 1rem;
    width: 100%;
  }

  .box {
    padding: 1rem;
    border: 2px solid;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .box.red {
    background-color: rgba(239, 68, 68, 0.5);
    border-color: #ef4444;
    width: 300px;
    flex-shrink: 3;
  }

  .box.blue {
    background-color: rgba(59, 130, 246, 0.5);
    border-color: #3b82f6;
    width: 150px;
    flex-shrink: 1;
  }
</style>

<div class="container">
  <div class="box red">width: 300px<br>flex-shrink: 3</div>
  <div class="box blue">width: 150px<br>flex-shrink: 1</div>
</div>

Open Sandbox

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 :

La boîte rouge rétrécit plus vite car elle a un flex-shrink plus élevé
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 :

<style>
  .navbar {
    display: flex;
    background: #1e293b;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }

  .logo {
    background: rgba(239, 68, 68, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
  }

  .menu {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    min-width: 0;
  }

  .menu-item {
    color: white;
    text-decoration: none;
    white-space: nowrap;
  }

  .actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .button {
    background: rgba(59, 130, 246, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
  }
</style>

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="menu">
    <a href="#" class="menu-item">Très long menu</a>
    <a href="#" class="menu-item">Autre long menu</a>
    <a href="#" class="menu-item">Menu qui prend de la place</a>
  </div>
  <div class="actions">
    <a href="#" class="button">Login</a>
    <a href="#" class="button">Register</a>
  </div>
</nav>

Open Sandbox

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 :

CSS

/* É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 :

flex-grow
flex-shrink
flex-basis

Cas d'usage pratiques

1. Galerie d'images responsive

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

<style>
  .gallery {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #1e293b;
    border-radius: 0.5rem;
  }

  .image {
    height: 150px;
    border-radius: 0.375rem;
    flex: 1 1 200px;
    min-width: 0;
    background-size: cover;
    background-position: center;
  }

  .image:nth-child(1) { background-color: rgba(239, 68, 68, 0.5); }
  .image:nth-child(2) { background-color: rgba(59, 130, 246, 0.5); }
  .image:nth-child(3) { background-color: rgba(234, 179, 8, 0.5); }
</style>

<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

Open Sandbox

2. Formulaire responsive

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

<style>
  .form {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #1e293b;
    border-radius: 0.5rem;
    align-items: flex-end;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .label {
    font-size: 0.875rem;
    color: #94a3b8;
  }

  .input {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    width: 100%;
  }

  .button {
    background: rgba(59, 130, 246, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    height: 38px;
  }
</style>

<form class="form">
  <div class="input-group">
    <label class="label">Nom</label>
    <input class="input" type="text" placeholder="John Doe">
  </div>
  <div class="input-group">
    <label class="label">Email</label>
    <input class="input" type="email" placeholder="john@example.com">
  </div>
  <button class="button">Envoyer</button>
</form>

Open Sandbox

Les bonnes pratiques avec flex-shrink

Utilise flex-shrink: 0 pour les éléments fixes : Parfait pour les logos, boutons, etc.
Laisse flex-shrink: 1 pour les contenus adaptables : Idéal pour les textes, images responsives
Combine avec min-width ou min-height : Pour éviter une réduction excessive
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 :

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

Reçois une formation TailwindCSS gratuite

Deviens un expert TailwindCSS en apprenant à créer de belles interfaces avec la librairie CSS la plus populaire au monde.