Flex-grow

La propriété flex-grow est une sous-propriété du module Flexible Box Layout (Flexbox). Elle définit la possibilité pour un item flex se s'étendre si nécessaire. Elle accepte une valeur sans unité, qui sert d'évaluation proportionnelle.

Par exemple, si tous les items ont un flex-grow fixé à 1, chacun aura une taille correspondant au contenu du container (sous réserve de l'action de flex-basis). Si vous donnez à l'un des items une valeur égale à 2, celui-ci occupera 2 fois plus de place que les autres.

Les valeurs de flex-grow et de flex-shrink sont proportionnelles, ce qui signifie qu’elles changent en fonction des valeurs des autres items. Flexbox fait la somme des valeurs données à chaque item, puis divise chaque valeur par cette somme. Chaque item occupe donc 1 ÷ (1 + 1 + 1) soit 1/3 de l’espace total. Que se passe-t-il si l’un des items a une valeur différente ?

//CSS
.column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
}
la 1ère colonne est 2 fois plus large

Le premier item prend la même quantité d’espace que les deux autres réunis. La raison en est que la somme des valeurs est égale à 4, donc le premier item occupe 2 ÷ (2 + 1 + 1), c’est à dire 1/2, et les deux autres occupent 1 ÷ (2 + 1 + 1), c’est à dire 1/4 de l’espace.


Exemples d’utilisation dans La Cascade :

Layout sur 12 colonnes avec Flexbox, par Landon Schropp

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.