La propriété flex-grow est une sous-propriété du module Flexible Box Layout.

Elle définit la capacité d'un élément flex à croître si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. Elle dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.

.element {
  flex-grow: 2;
}

Par exemple, si tous les éléments ont la valeur flex-grow définie sur 1, chaque enfant aura une taille égale à l'intérieur du conteneur. Si vous donnez à l'un des enfants une valeur de 2, cet enfant occupera deux fois plus d'espace que les autres.

Syntaxe

flex-grow: <number>;

voir Flex-grow: demo de Kitty Giraudel dans CodePen

Tous les éléments ont une valeur flex-grow de 1, sauf le 3e qui a une valeur flex-grow de 2. Cela signifie que lorsque l'espace disponible est distribué, le 3e élément flex aura deux fois plus d'espace que les autres.