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

28/01/2025 • Melvynx

Loading...

Content

  • C'est quoi flex-shrink ?
  • Le concept de réduction
  • Comment ça marche concrètement ?
  • Le piège commun avec flex-shrink
  • La solution ultime : flex shorthand
  • Cas d'usage pratiques
  • 1. Galerie d'images responsive
  • 2. Formulaire responsive
  • Les bonnes pratiques avec flex-shrink
  • Compatibilité des navigateurs
  • Pour aller plus loin

Reçois une formation gratuite sur nextreact

Courses

  • Formation React
  • Formation JavaScript
  • Formation Tailwind
  • Formation NextJS Full-Stack
  • Formation AI (Cursor / Copilot)
  • Formation HTML/CSS

Products

  • Codeline
  • Chat2Code
  • QuizUp
  • NOW.TS
  • Lumail
  • SaveIt.now
  • PadelTally.com

Popular articles

  • Mon année 2024
  • Mon année 2025
  • All articles

Categories

  • CSSCSS
  • HTMLHTML
  • JavaScriptJavaScript
  • Next.jsNext.js
  • ReactReact
  • TypeScriptTypeScript
codelynx.dev
Terms & Conditions•Privacy Policy•Refund Policy

Copyright © 2025 Codelynx LLC. All rights reserved.

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 on CodeSandboxOpen 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 - elles rétrécissent normalement
flex-shrink: 1

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 :

<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 on CodeSandboxOpen 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 :

  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 :

<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 on CodeSandboxOpen 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 :

  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 :

<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 on CodeSandboxOpen 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 on CodeSandboxOpen Sandbox

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 :

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.

/>

Codelynx.dev
Posts