Propriété CSS flex-grow
La propriété flex-grow spécifie de combien un élément peut grandir par rapport aux autres éléments du conteneur flex. Si tous les éléments du conteneur ont un facteur flex-grow défini, ils se partagent l'espace libre restant de manière proportionnelle selon leurs facteurs. La taille principale d'un élément flexible est soit sa hauteur, soit sa largeur, selon la valeur de flex-direction.
Cette propriété fait partie des propriétés CSS3. Elle est utilisée conjointement avec les propriétés flex-shrink et flex-basis.
INFO
S'il n'y a pas d'éléments flexibles, la propriété flex-grow n'aura aucun effet.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Éléments flex, y compris les pseudo-éléments en flux. |
| Héritée | Non. |
| Animable | Oui. Les éléments sont animables. |
| Version | CSS3 |
| Syntaxe DOM | object.style.flexGrow = 3; |
Syntaxe
Syntaxe de la propriété CSS flex-grow
flex-grow: number | initial | inherit;Exemple de la propriété flex-grow :
Exemple de la propriété CSS flex-grow avec une valeur numérique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Résultat
Exemple de la propriété flex-grow avec un facteur de croissance plus élevé :
Propriété CSS flex-grow avec un nombre comme valeur
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| number | Spécifie de combien l'élément peut grandir par rapport aux autres éléments flexibles du même conteneur. La valeur par défaut est 0. | Tester » |
| initial | Réinitialise la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite de cette propriété depuis l'élément parent. |
Practice
Quelle est la fonction de la propriété 'flex-grow' en CSS ?