flex-grow
Détermine avec quelle avidité un élément grandit pour remplir l’espace libre.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que nombre
- S’applique à
- éléments flex
- JavaScript
element.style.flexGrow = "1"
Exemple
#.search {
display: flex;
gap: 8px;
}
.search input {
flex-grow: 1;
}<form class="search stage">
<input placeholder="Rechercher un cours" style="padding: 8px 10px;">
<button type="submit">Rechercher</button>
</form>Définition et utilisation
#La propriété flex-grow accepte un nombre qui indique quelle part de l’espace libre du conteneur l’élément recevra. Avec la valeur par défaut 0, l’élément ne grandit pas du tout.
Les nombres fonctionnent proportionnellement. Si un élément a flex-grow: 2 et un autre 1, le premier recevra deux fois plus d’espace supplémentaire. Attention : seul l’espace libre est partagé, donc des éléments avec un contenu différent n’ont pas forcément des largeurs proportionnelles.
Pour que les tailles soient strictement proportionnelles aux nombres, combinez flex-grow avec flex-basis: 0, le plus simplement avec le raccourci flex: 1.
Syntaxe
#flex-grow: <nombre>;Valeurs
#Valeurs en pratique
#0
.target { flex-grow: 0; }1
.target { flex-grow: 1; }1, 1, 1
.demo .box { flex-grow: 1; }2, 1
.demo .box { flex-grow: 1; }
.target { flex-grow: 2; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Un champ de recherche avec un bouton à côté est un cas classique : le champ reçoit
flex-grow: 1, le bouton garde sa taille naturelle. - Pour des colonnes égales, utilisez
flex: 1, pas seulementflex-grow: 1.
Entrées associées
#- flex-shrinkDétermine à quel point un élément rétrécit quand la place manque dans le conteneur.
- flex-basisFixe la taille de départ d’un élément flex sur l’axe principal, avant qu’il ne commence à grandir ou à rétrécir.
- flexRaccourci qui règle flex-grow, flex-shrink et flex-basis d’un élément.
- justify-contentRépartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.