Svojstvo flex-grow

Svojstvo flex-grow određuje, koliko pojedinačni flex-blok može biti veći od susednih elemenata, ako je to potrebno.

Na primer, ako svi flex-blokovi unutar flex-kontejnera imaju flex-grow:1, onda će oni biti iste veličine. Ako jedan od njih ima flex-grow:2, onda će on biti 2 puta veći od svih ostalih.

Ako je zbirna širina elemenata manja od širine roditelja, tako da ostaje prazan prostor sa desne strane. Po želji, ovaj prazan prostor se može proporcionalno podeliti između naših elemenata. To se radi pomoću svojstva flex-grow, koje se dodeljuje fleks-elementima. Vrednost ovog svojstva je bezdimenzioni broj.

Primenjuje se na: konkretan flex blok.

Ovo svojstvo ulazi kao sastavni deo u skraćeno svojstvo flex.

Sintaksa

selektor {
	flex-grow: pozitivan broj;
}

Podrazumevana vrednost: 0.

Primer

Sada imamo dva fleks-bloka sa širinom od 100px. Njihova zbirna širina je 200px, a širina roditelja je 300px. Ispada da ostaje slobodan prostor od 100px.

Ako elementima nije dodeljeno flex-grow, onda ćemo jednostavno videti ovaj slobodan prostor. Ako im je dodeljeno, onda će stvarna širina elemenata biti veća od zadate - oni će proporcionalno podeliti slobodan prostor među sobom i dodati ga svojoj širini.

Neka za primer kod prvog elementa flex-grow bude jednak 1, a kod drugog - 3. Hajde da izračunamo, koji deo slobodnog prostora će dobiti svaki element.

Za početak treba dobiti ukupnu količinu jedinica flex-grow svih naših elemenata. Kod prvog elementa on je jednak 1, a kod drugog - 3. To znači da je u zbiru jednak 4.

Podelimo sada 100px slobodnog prostora na 4 i dobijemo da 25px dolazi na jednu jedinicu flex-grow. Ispaće, da će se prvom elementu dodati jedna jedinica flex-grow, to jest 25px, a drugom - tri jedinice, to jest 75px.

Širina prvog elementa će ispasti 125px, a drugog - 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;
}

Primer

Neka sada širina roditelja bude jednaka 400px, širina prvog elementa 200px, a širina drugog elementa - 100px. Ispaće, da je slobodan prostor opet jednak 100px.

Hajde da svakom elementu dodelimo flex-grow, jednak 1. U zbiru će ispasti 2, to jest 100px slobodnog prostora treba podeliti na 2. Ispaće da 50px dolazi na jednu jedinicu pohlepe.

Pošto svi elementi imaju istu vrednost flex-grow, onda će se svim elementima dodati ista vrednost od 50px. To znači, da će prvi element postati 250px, i a drugi će postati 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;
}

Primer

Neka opet širina roditelja bude jednaka 400px, širina prvog elementa 200px, a širina drugog elementa - 100px.

Hajde sada da prvom elementu postavimo flex-grow u vrednost 3, a drugom - u vrednost 1. Ispaće da je pohlepa u zbiru jednaka 4. Tada jedna jedinica pohlepe je jednaka 100px / 4 = 25px.

Prvom elementu će se dodati 75px, i on će postati 275px, a drugom - 25px, on će postati 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;
}

Pogledajte takođe

svojstvo flex-direction,
koje zadaje smer osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje duž glavne ose
svojstvo align-items,
koje zadaje poravnanje duž poprečne ose
svojstvo flex-wrap,
koje višelinijskost flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje zadaje redosled flex blokova
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo flex-basis,
koje zadaje veličinu konkretnog flex bloka
svojstvo flex-shrink,
koje zadaje sabijanje flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis