Codelynx.dev
Posts

Flex-grow en CSS - Le guide complet pour maîtriser la distribution d'espace

27/01/2025 • Melvynx

Tu cherches à comprendre comment fonctionne flex-grow en CSS ? Tu veux savoir comment distribuer l'espace disponible entre tes éléments de manière précise ? Tu es au bon endroit !

Dans cet article, on va plonger en profondeur dans flex-grow, une propriété CSS puissante mais souvent mal comprise. Je vais t'expliquer son fonctionnement avec des exemples interactifs et des cas d'usage concrets.

Qu'est-ce que flex-grow ?

flex-grow est une propriété CSS qui définit la capacité d'un élément à grandir par rapport aux autres éléments dans un conteneur flex. C'est comme un "coefficient de croissance" qui détermine quelle proportion d'espace disponible l'élément va prendre.

La valeur par défaut est 0, ce qui signifie que l'élément ne grandira pas automatiquement. Une valeur positive permet à l'élément de grandir pour occuper l'espace disponible.

Le concept d'espace disponible

Avant d'aller plus loin, il est crucial de comprendre ce qu'est "l'espace disponible". C'est la différence entre :

  • La largeur du conteneur flex
  • La somme des largeurs de base de tous les éléments flex
<style>
  .container {
    display: flex;
    border: 2px solid #1e293b;
    padding: 1rem;
    gap: 0.5rem;
    margin: 1rem;
  }

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

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

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

<div class="container">
  <div class="box red">flex-grow: 1</div>
  <div class="box blue">width: 100px</div>
</div>
Open on CodeSandboxOpen Sandbox

Dans cet exemple, l'espace disponible est tout ce qui reste après avoir placé la boîte bleue de 100px. La boîte rouge avec flex-grow: 1 va prendre tout cet espace disponible.

Comment fonctionne flex-grow ?

flex-grow fonctionne comme un système de proportion. Voici les règles principales :

  1. Si tous les éléments ont flex-grow: 1, ils grandissent de manière égale
  2. Si un élément a flex-grow: 2 et les autres flex-grow: 1, il prendra deux fois plus d'espace disponible
  3. Si un élément a flex-grow: 0, il ne grandira pas du tout

Regardons un exemple concret :

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

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

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

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

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

<div class="container">
  <div class="box red">flex-grow: 2</div>
  <div class="box blue">flex-grow: 1</div>
  <div class="box yellow">flex-grow: 1</div>
</div>
Open on CodeSandboxOpen Sandbox

Dans cet exemple :

  • La boîte rouge prend 2/4 de l'espace disponible (ratio de 2)
  • Les boîtes bleue et jaune prennent chacune 1/4 de l'espace disponible (ratio de 1)

Le piège de flex-grow

Une erreur courante est de penser que flex-grow: 2 signifie "deux fois plus grand". Ce n'est pas exactement ça ! Regardons pourquoi :

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

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

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

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

<div class="container">
  <div class="box red">flex-grow: 2<br>width: 100px</div>
  <div class="box blue">flex-grow: 1<br>width: 100px</div>
</div>
Open on CodeSandboxOpen Sandbox

Ici, les deux boîtes ont une largeur de base de 100px. flex-grow ne distribue que l'espace disponible :

  1. L'espace total est de 100% du conteneur
  2. Les boîtes prennent déjà 200px (2 × 100px)
  3. L'espace restant est distribué selon les ratios de flex-grow

La solution : flex shorthand

Pour avoir un véritable ratio de taille, on utilise la propriété raccourcie flex :

CSS
.element {
  flex: 1;
}

Cette syntaxe définit :

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

Le secret est dans flex-basis: 0 qui "réinitialise" la taille de base des éléments. Regardons la différence :

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

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

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

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

<div class="container">
  <div class="box red">flex: 2</div>
  <div class="box blue">flex: 1</div>
</div>
Open on CodeSandboxOpen Sandbox

Maintenant, la boîte rouge est vraiment deux fois plus grande que la bleue !

Cas d'usage concrets

1. Barre de navigation responsive

Un cas d'usage classique est une barre de navigation où le menu principal doit prendre tout l'espace disponible :

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

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

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

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

  .actions {
    display: flex;
    gap: 0.5rem;
  }

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

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="menu">
    <a href="#" class="menu-item">Accueil</a>
    <a href="#" class="menu-item">Produits</a>
    <a href="#" class="menu-item">Services</a>
  </div>
  <div class="actions">
    <a href="#" class="button">Login</a>
    <a href="#" class="button">Register</a>
  </div>
</nav>
Open on CodeSandboxOpen Sandbox

2. Layout de page avec sidebar

Un autre cas classique est un layout avec une sidebar et un contenu principal :

<style>
  .layout {
    display: flex;
    gap: 1rem;
    height: 300px;
    margin: 1rem;
  }

  .sidebar {
    background: #1e293b;
    padding: 1rem;
    border-radius: 0.375rem;
    width: 200px;
  }

  .content {
    background: #1e293b;
    padding: 1rem;
    border-radius: 0.375rem;
    flex-grow: 1;
  }
</style>

<div class="layout">
  <aside class="sidebar">
    <h2>Sidebar</h2>
    <p>Navigation fixe</p>
  </aside>
  <main class="content">
    <h1>Contenu Principal</h1>
    <p>Cette section prend tout l"espace disponible grâce à flex-grow: 1</p>
  </main>
</div>
Open on CodeSandboxOpen Sandbox

Bonnes pratiques avec flex-grow

  1. Utilise des valeurs simples : Préfère des valeurs comme 1, 2, 3 plutôt que 1.5 ou 2.7
  2. Combine avec flex-basis : Pour un contrôle précis, utilise flex-basis avec flex-grow
  3. Pense aux breakpoints : Ajuste les valeurs de flex-grow selon les breakpoints pour un design responsive
  4. N'oublie pas flex-shrink : Pense à comment tes éléments vont se comporter quand l'espace est réduit

Compatibilité des navigateurs

flex-grow est supporté par tous les navigateurs modernes :

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

Pour aller plus loin

Si tu veux approfondir tes connaissances en CSS layout, je te recommande :

  1. Le guide complet de Flexbox
  2. 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.
/>