CSS flex-grow
La proprietà CSS3 flex-grow controlla la crescita proporzionale degli elementi flessibili
La proprietà flex-grow indica quanto un elemento flex può espandersi per occupare lo spazio disponibile nel contenitore. Il valore è proporzionale: un elemento con flex-grow: 2 crescerà il doppio rispetto a uno con flex-grow: 1. È una proprietà fondamentale introdotta in CSS3 Flexbox.
Sintassi
Significato dei valori principali:
-
0: valore predefinito. L’elemento non cresce, mantiene la sua dimensione base.
-
1: l’elemento può crescere per occupare lo spazio disponibile, in proporzione con gli altri.
-
n (numero intero o decimale): quanto maggiore è il numero, tanto più spazio l’elemento riceverà rispetto agli altri. Ad esempio,
flex-grow: 2riceve il doppio dello spazio rispetto aflex-grow: 1.
Esempio proprietà: flex-grow
Codice Esempio: flex-grow
.flex-grow-container {
display: flex;
width: 100%;
background-color: #eee;
gap: 10px;
padding: 10px;
height: 100px;
}.flex-grow-item1 {
background-color: #50a14f;
color: white;
padding: 10px;
flex-grow: 1;
text-align: center;
border-radius: 4px;
}.flex-grow-item2 {
background-color: #ff6347;
color: white;
padding: 10px;
flex-grow: 2;
text-align: center;
border-radius: 4px;
}.flex-grow-item3 {
background-color: #3a86ff;
color: white;
padding: 10px;
flex-grow: 1;
text-align: center;
border-radius: 4px;
}
Contenuto Esempio: flex-grow
Esempio di utilizzo di flex-grow
In questo esempio, gli elementi hanno valori di flex-grow differenti, quindi crescono in modo proporzionale all’interno del contenitore:
CSS e HTML per l’esempio con flex-grow:
<style>
.flex-grow-container {
display: flex;
width: 100%;
background-color: #eee;
gap: 10px;
padding: 10px;
height: 100px;
}
.flex-grow-item1 {
background-color: #50a14f;
color: white;
padding: 10px;
flex-grow: 1;
text-align: center;
border-radius: 4px;
}
.flex-grow-item2 {
background-color: #ff6347;
color: white;
padding: 10px;
flex-grow: 2;
text-align: center;
border-radius: 4px;
}
.flex-grow-item3 {
background-color: #3a86ff;
color: white;
padding: 10px;
flex-grow: 1;
text-align: center;
border-radius: 4px;
}
</style>
<div class="flex-grow-container">
<div class="flex-grow-item1">Grow 1</div>
<div class="flex-grow-item2">Grow 2</div>
<div class="flex-grow-item3">Grow 1</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
