Proprietatea flex-grow

Proprietatea flex-grow determină cât de mult un bloc flex individual poate fi mai mare decât elementele învecinate, dacă este necesar.

De exemplu, dacă toate blocurile flex din interiorul containerului flex au flex-grow:1, atunci acestea vor avea aceeași dimensiune. Dacă unul dintre ele are flex-grow:2, atunci acesta va fi de 2 ori mai mare decât toate celelalte.

Dacă lățimea totală a elementelor este mai mică decât lățimea părintelui, atunci în dreapta rămâne spațiu liber. Dacă se dorește, acest spațiu liber poate fi repartizat proporțional între elementele noastre. Acest lucru se face cu ajutorul proprietății flex-grow, atribuită elementelor flex. Valoarea acestei proprietăți este un număr adimensional.

Se aplică la: un bloc flex specific.

Această proprietate face parte ca componentă a proprietății abreviate flex.

Sintaxă

selector {
	flex-grow: număr pozitiv;
}

Valoare implicită: 0.

Exemplu

Acum avem două blocuri flex cu lățimea de 100px. Lățimea lor totală este 200px, iar lățimea părintelui este 300px. Rezultă că rămâne spațiu liber de 100px.

Dacă elementelor nu le este atribuit flex-grow, atunci vom vedea pur și simplu acest spațiu liber. Dacă le este atribuit, atunci lățimea reală a elementelor va fi mai mare decât cea setată - acestea vor împărți proporțional spațiul liber între ele și îl vor adăuga la propria lor lățime.

Să presupunem, de exemplu, că primul element are flex-grow egal cu 1, iar al doilea - 3. Să calculăm ce parte din spațiul liber va primi fiecare element.

Pentru început, trebuie să obținem cantitatea totală de unități flex-grow ale tuturor elementelor noastre. La primul element este 1, iar la al doilea - 3. Aceasta înseamnă că în total este 4.

Să împărțim acum 100px de spațiu liber la 4 și obținem că 25px revin unei unități de flex-grow. Rezultă că la primul element se va adăuga o unitate flex-grow, adică 25px, iar la al doilea - trei unități, adică 75px.

Lățimea primului element va fi 125px, iar a celui de-al doilea - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Exemplu

Să presupunem acum că lățimea părintelui este 400px, lățimea primului element 200px, iar lățimea celui de-al doilea element - 100px. Rezultă că spațiul liber este din nou egal cu 100px.

Să atribuim fiecărui element flex-grow, egal cu 1. În total va fi 2, adică 100px de spațiu liber trebuie împărțit la 2. Rezultă că 50px revin unei unități de lăcomie.

Deoarece toate elementele au aceeași valoare flex-grow, atunci la toate elementele se va adăuga aceeași valoare de 50px. Aceasta înseamnă că primul element va deveni 250px, iar al doilea va deveni 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Exemplu

Să presupunem din nou că lățimea părintelui este 400px, lățimea primului element 200px, iar lățimea celui de-al doilea element - 100px.

Să setăm acum primului element flex-grow la valoarea 3, iar celui de-al doilea - la valoarea 1. Rezultă că lăcomia în total este 4. Atunci o unitate de lăcomie este egală cu 100px / 4 = 25px.

La primul element se va adăuga 75px, și acesta va deveni 275px, iar la al doilea - 25px, acesta va deveni 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.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;
}

Vezi și

proprietatea flex-direction,
care stabilește direcția axelor blocurilor flex
proprietatea justify-content,
care stabilește alinierea de-a lungul axei principale
proprietatea align-items,
care stabilește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care stabilește multi-linia blocurilor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea blocurilor flex
proprietatea align-self,
care stabilește alinierea unui singur bloc
proprietatea flex-basis,
care stabilește dimensiunea unui bloc flex specific
proprietatea flex-shrink,
care stabilește compresibilitatea blocurilor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis