La gourmandise des blocs flex avec une largeur spécifiée en CSS
Supposons que nous ayons plusieurs blocs flex.
Donnons à l'un de ces blocs une propriété flex-grow
avec la valeur 1, et à tous les autres éléments
- une certaine largeur. Le résultat sera
que tous les blocs auront une largeur fixe,
et notre bloc gourmand sélectionné occupera
tout l'espace disponible restant :
<div class="parent">
<div class="child elem1"></div>
<div class="child elem2"></div>
<div class="child elem3"></div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
flex-grow: 1;
}
.elem3 {
width: 100px;
}
:
L'effet caractéristique est particulièrement visible lorsque la largeur du parent est en pourcentages. Dans ce cas, lorsque la largeur du parent change, notre bloc gourmand aura une largeur variable, et tous les autres - une largeur fixe :
