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>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.
flex-grow fonctionne comme un système de proportion. Voici les règles principales :
- Si tous les éléments ont
flex-grow: 1, ils grandissent de manière égale
- Si un élément a
flex-grow: 2 et les autres flex-grow: 1, il prendra deux fois plus d'espace disponible
- 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>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>Ici, les deux boîtes ont une largeur de base de 100px. flex-grow ne distribue que l'espace disponible :
- L'espace total est de 100% du conteneur
- Les boîtes prennent déjà 200px (2 × 100px)
- 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 :
Cette syntaxe définit :
flex-grow: 1flex-shrink: 1flex-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>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>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>Bonnes pratiques avec flex-grow
- Utilise des valeurs simples : Préfère des valeurs comme 1, 2, 3 plutôt que 1.5 ou 2.7
- Combine avec flex-basis : Pour un contrôle précis, utilise
flex-basis avec flex-grow
- Pense aux breakpoints : Ajuste les valeurs de
flex-grow selon les breakpoints pour un design responsive
- 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 :
- Le guide complet de Flexbox
- Apprendre Tailwind CSS
Tu peux aussi t'inscrire à mon cours gratuit sur Tailwind et CSS :
/>