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

Utilisable sur

HTML

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)

CSS Flexible Box Layout Module Level 1

Statut du document: CR (document candidat à 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.

Valeurs 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.

Valeurs communes :


flex-grow: initial  (0)
flex-grow: inherit
flex-grow: revert
flex-grow: revertLayer
flex-grow: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

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 avec la propriété `flex-grow`.

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 :

Prise en charge de `flex-grow` par les navigateurs.

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

Prise en charge des conteneurs flex-box de façon générale.

Colonne 2

Prise en charge de la propriété flex-grow pour autoriser l'agrandissement des éléments dans un conteneur flex-box.

Remarques :

(1) Implémentation partielle. De nombreux bogues présents.

Support des
Flex-box

Propriété
flex-grow

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `flex-grow`.

Module CSS - Mise en page par flex-box - Niveau 1

23 Juillet 2009
Document de travail.
18 Septembre 2012
Candidat à la recommandation.

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont décrites dans le module CSS Flexible Box Layout Module. La propriété flex-grow y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :

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

Enchaî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-box.

order

Définit l'ordre des éléments dans un flex-box.