Lastnost flex-grow

Lastnost flex-grow določa, koliko lahko je posamezen flex-blok večji od sosednjih elementov, če je to potrebno.

Na primer, če imajo vsi flex-bloki znotraj flex-vsebnika flex-grow:1, bodo enake velikosti. Če ima eden od njih flex-grow:2, bo 2 krat večji od vseh ostalih.

Če je skupna širina elementov manjša od širine starša, ostane na desni prazen prostor. Po želji lahko ta prazen prostor razdelimo sorazmerno med naše elemente. To naredimo z lastnostjo flex-grow, ki jo določimo flex-elementom. Vrednost te lastnosti je brezdimenzijsko število.

Velja za: posamezen flex blok.

Ta lastnost je vključena kot sestavni del v okrajšano lastnost flex.

Sintaksa

selektor {
	flex-grow: pozitivno število;
}

Privzeta vrednost: 0.

Primer

Zdaj imamo dva flex-bloka s širino 100px. Njuna skupna širina elementov je 200px, širina starša pa je 300px. Izkazalo se je, da ostane prostor 100px.

Če elementom ni določen flex-grow, bomo preprosto videli ta prostor. Če pa jim je določen, bo dejanska širina elementov večja od določene - sorazmerno bodo razdelili prostor med seboj in ga dodali k svoji širini.

Za primer naj ima prvi element flex-grow enak 1, drugi pa 3. Izračunajmo, koliko prostora bo dobil vsak element.

Za začetek moramo dobiti skupno število enot flex-grow vseh naših elementov. Prvi element ima 1, drugi pa 3. To pomeni, da je skupaj enak 4.

Zdaj delimo 100px prostora z 4 in dobimo, da 25px pripada na eno enoto flex-grow. Izkazalo se bo, da se bo prvemu elementu dodala ena enota flex-grow, to je 25px, drugemu pa tri enote, to je 75px.

Širina prvega elementa bo 125px, drugega pa 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

Naj bo zdaj širina starša 400px, širina prvega elementa 200px, širina drugega elementa pa 100px. Izkazalo se bo, da je prostor spet enak 100px.

Določimo vsakemu elementu flex-grow, enak 1. Skupaj bo 2, kar pomeni, da je treba 100px prostora razdeliti na 2. Izkazalo se bo, da 50px pripada na eno enoto pohlepnosti.

Ker imajo vsi elementi enako vrednost flex-grow, se bo vsem elementom dodala enaka vrednost 50px. To pomeni, da bo prvi element postal 250px, drugi pa 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

Naj bo spet širina starša 400px, širina prvega elementa 200px, širina drugega elementa pa 100px.

Naj ima zdaj prvi element flex-grow vrednost 3, drugi pa vrednost 1. Izkazalo se bo, da je pohlepnost skupaj enaka 4. Takrat je ena enota pohlepnosti enaka 100px / 4 = 25px.

K prvemu elementu se bo dodalo 75px, in postal bo 275px, k drugemu pa 25px, postal bo 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;
}

Glejte tudi

lastnost flex-direction,
ki določa smer osi flex blokov
lastnost justify-content,
ki določa poravnavo vzdolž glavne osi
lastnost align-items,
ki določa poravnavo vzdolž prečne osi
lastnost flex-wrap,
ki določa večvrstičnost flex blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost order,
ki določa vrstni red flex blokov
lastnost align-self,
ki določa poravnavo enega bloka
lastnost flex-basis,
ki določa velikost posameznega flex bloka
lastnost flex-shrink,
ki določa stisljivost flex blokov
lastnost flex,
okrajšava za flex-grow, flex-shrink in flex-basis