---
title: flex-grow
slug: Web/CSS/flex-grow
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/flex-grow
---
<div>{{CSSRef}}</div>

<p>La propriété CSS <strong><code>flex-grow</code></strong> définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.</p>

<p>La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.</p>

<p>L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.</p>

<p>La plupart du temps <code>flex-grow</code> est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.</p>

<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">flex-grow: 2;
flex-grow: 0.6;

/* Valeurs globales */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
</pre>

<p>La propriété <code>flex-grow</code> se définit avec une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
 <dd>Un nombre (type {{cssxref("&lt;number&gt;")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<div id="Live_Sample">
<pre class="brush: html">&lt;h4&gt;A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .&lt;/h4&gt;
&lt;div id="content"&gt;
  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-shrink: 1;
  border: 3px solid rgba(0,0,0,.2);
}

.box1 {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}
</pre>
</div>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', '700px', '300px')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spécification</th>
   <th>État</th>
   <th>Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
   <td>{{Spec2('CSS3 Flexbox')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.flex-grow")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="https://css-tricks.com/flex-grow-is-weird/"><code>flex-grow</code> est étrange ?</a> un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement de <code>flex-grow</code></li>
 <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
 <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
</ul>