Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété flex-grow

Description de la propriété flex-grow.

flex-grow définit si l'élément flexible (contenu dans un flex-box) peut s'agrandir pour remplir l'espace disponible dans le container flex. et dans ce cas, dans quelle proportion peut-il s'agrandir par rapport aux autres éléments qui sont également autorisés à s'agrandir.

flex-grow n'a d'effet que sur les éléments contenus dans un flex-box.

flex-grow agit suivant l'axe principal du flex-box. Comme ce dernier est le plus souvent l'axe horizontal, la propriété agit le plus souvent sur la largeur de l'élément.

Trois propriétés agissent sur les dimensions d'un élément dans un flex-box : flex-grow, Object et Object. Il est conseillé de les définir toutes ensembles avec la propriété raccourcie flex.

Syntaxes pour flex-grow.

  • flex-grow: 0;

    Valeur par défaut. Cet élément n'est pas autorisé à s'agrandir. sa taille est déterminée par sa propriété Object.

  • flex-grow: 2;

    Une valeur sans unité supérieure à 0. Cet élément est autorisé à s'agrandir pour occuper l'espace restant disponible dans le container flex. Si plusieurs éléments ont une valeur > 0, ils s'agrandissent proportionnellement à cette valeur.

  • flex-grow: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

La valeur Object des quatre éléments ci-dessous a été fixée à 15%. Il reste donc pas mal de place disponible dans le container.

Le simulateur applique les valeurs que vous choisissez aux deux cadres bleus. Observez comment ceux-ci se répartissent l'espace disponible en fonction de leur valeur pour flex-grow.

flex-grow :
   
A
B
C
D

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.