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 :

flex-grow - Propriété CSS

flex-grow

Résumé des caractéristiques de la propriété flex-grow

Description rapide
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Statut
Standard
Type de valeur
Décimal+
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété flex-grow passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Mise en page par flex-box
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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, flex-shrink et flex-basis. Il est pratique de les définir toutes ensembles avec la propriété résumée 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é flex-basis.

  • 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 supérieure à 0, ils s'agrandissent proportionnellement à cette valeur.

  • flex-grow: initial; flex-grow: inherit; flex-grow: revert; flex-grow: revert-layer; flex-grow: unset;

    La valeur initiale est : 0.

Exemples d'animation avec flex-grow.

L'effet ci-dessous a été obtenu en appliquant la même animation aux trois éléments interne du flex-box, mais avec des temps différents et non multiples les uns des autres. On obtient ainsi quelque chose qui ressemble à un mouvement aléatoire.

 
 
 

Simulateur.

La valeur flex-basis 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

Prise en charge par les navigateurs (compatibilité).

La gestion des flex-box et des propriétés qui les concernent (comme flex-grow) sont bien traitées par les navigateurs récents.

Colonne 1
Support général des mises en page avec des conteneurs flex-box.
Colonne 2
Support de la propriété flex-grow
1
Flex˗box
2
flex-grow
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que flex-grow.

Les spécifications CSS éditées par le W3C sont organisées en modules. flex-grow fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Choisit l'axe principal et l'axe secondaire d'un flex box.
Echaînement des éléments enfant dans un flex-box.
Autorise ou non la compression d'un élément contenu dans un flex-box.
Gestion des retours à la ligne dans un container flex.
Ordre des éléments dans un flex-box.