La proprietà flex-grow degli elementi in CSS
Supponiamo di avere due blocchi flessibili,
allineati in una riga. A questi blocchi è assegnata una larghezza
di 100px, e al loro genitore - 300px:
html<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
Результат:
Come puoi vedere, la larghezza totale dei nostri elementi è inferiore alla larghezza del genitore, quindi sulla destra rimane spazio vuoto.
Se lo si desidera, questo spazio vuoto può essere
diviso proporzionalmente tra i nostri elementi.
Questo viene fatto utilizzando la proprietà flex-grow,
assegnata agli elementi flessibili. Il valore di questa
proprietà è un numero adimensionale.
Vediamo in pratica come funziona questa proprietà.
Esempio
Attualmente abbiamo due blocchi flessibili con una larghezza di
100px. La loro larghezza totale
200px, mentre la larghezza del genitore è 300px.
Risulta che rimane uno spazio libero
di 100px.
Se agli elementi non è assegnato flex-grow,
allora vedremo semplicemente questo spazio libero.
Se invece è assegnato, allora la larghezza reale degli elementi
sarà maggiore di quella impostata - essi divideranno proporzionalmente
lo spazio libero tra loro
e lo aggiungeranno alla propria larghezza.
Ad esempio, supponiamo che il primo elemento abbia flex-grow
uguale a 1, e il secondo - 3. Calcoliamo
quale parte dello spazio libero
otterrà ogni elemento.
Per prima cosa è necessario ottenere la quantità totale
di unità flex-grow di tutti i nostri elementi.
Per il primo elemento è 1, e
per il secondo - 3. Ciò significa che in totale
è 4.
Ora dividiamo 100px di spazio libero
per 4 e otteniamo che 25px spettano
a una singola unità di flex-grow. Risulta
che al primo elemento verrà aggiunta una unità
di flex-grow, cioè 25px, e
al secondo - tre unità, cioè
75px.
La larghezza del primo elemento risulterà 125px,
e del secondo - 175px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
Результат:
Esempio
Supponiamo ora che la larghezza del genitore sia 400px,
la larghezza del primo elemento 200px, e la larghezza
del secondo elemento - 100px. Risulta
che lo spazio libero è ancora
100px.
Assegniamo a ogni elemento flex-grow,
uguale a 1. In totale sarà 2,
cioè 100px di spazio libero
deve essere diviso per 2. Risulterà che
50px spettano a una
unità di flex-grow.
Poiché tutti gli elementi hanno lo stesso valore
di flex-grow, a tutti gli elementi verrà aggiunto
lo stesso valore di 50px. Ciò significa
che il primo elemento diventerà 250px, e
il secondo diventerà 150px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Esempio
Supponiamo ancora che la larghezza del genitore sia 400px,
la larghezza del primo elemento 200px, e la larghezza
del secondo elemento - 100px.
Ora impostiamo per il primo elemento
flex-grow al valore 3, e per il secondo
- al valore 1. Risulterà che il flex-grow
totale è 4. Allora una unità
di flex-grow è uguale a 100px / 4 = 25px.
Al primo elemento verranno aggiunti 75px,
e diventerà 275px, mentre al secondo -
25px, diventerà 125px:
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>css.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
Результат:
Compiti pratici
In tutti i compiti qui sotto ti verrà presentato
del codice con elementi flessibili, aventi
larghezza e flex-grow. In base al codice
presentato, calcola quali dimensioni avrà
ciascuno degli elementi. Quindi esegui il codice
e verifica i tuoi calcoli, misurando le larghezze reali
degli elementi.
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>css.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
html<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>css.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}