Savybė flex-grow

Savybė flex-grow nustato, kiek individualus flex blokas gali būti didesnis už gretimus elementus, jei to reikia.

Pavyzdžiui, jei visi flex blokai flex konteinerio viduje turi flex-grow:1, tai jie bus vienodo dydžio. Jei vienas iš jų turi flex-grow:2, tai jis bus 2 karto didesnis už visus kitus.

Jei bendras elementų plotis mažesnis už tėvinio elemento plotį, dešinėje lieka tuščia erdvė. Jei norima, ši tuščia erdvė gali būti proporcingai paskirstyta tarp mūsų elementų. Tai daroma naudojant savybę flex-grow, kuri nustatoma flex elementams. Šios savybės reikšmė yra bematis skaičius.

Taikoma: konkrečiam flex blokui.

Ši savybė įeina kaip sudedamoji dalis į trumpinio savybę flex.

Sintaksė

selektorius {
	flex-grow: teigiamas skaičius;
}

Numatytoji reikšmė: 0.

Pavyzdys

Dabar mes turime du flex blokus, kurių plotis 100px. Jų bendras plotis 200px, o tėvinio elemento plotis - 300px. Pasirodo, kad lieka laisva erdvė 100px.

Jei elementams nenustatytas flex-grow, tai mes tiesiog pamatysime šią laisvą erdvę. Jei ji jiems nustatyta, tai realus elementų plotis bus didesnis už nustatytą - jie proporcingai paskirstys laisvą erdvę tarp savęs ir pridės ją prie savo pločio.

Tarkime, pavyzdžiui, pirmojo elemento flex-grow yra 1, o antrojo - 3. Apskaičiuokime, kokią dalį laisvos erdvės gaus kiekvienas elementas.

Pirmiausia reikia gauti bendrą vienetų flex-grow skaičių visuose mūsų elementuose. Pirmojo elemento jis yra 1, o antrojo - 3. Tai reiškia, kad iš viso jis lygus 4.

Padalinkime dabar 100px laisvos erdvės iš 4 ir gausime, kad 25px tenka vienam flex-grow vienetui. Pasirodo, kad prie pirmojo elemento bus pridėtas vienas vienetas flex-grow, tai yra 25px, o prie antrojo - trys vienetai, tai yra 75px.

Pirmojo elemento plotis bus 125px, o antrojo - 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;
}

Pavyzdys

Tarkime, kad tėvinio elemento plotis yra 400px, pirmojo elemento plotis 200px, o antrojo elemento plotis - 100px. Pasirodo, kad laisva erdvė vėl lygi 100px.

Suteikime kiekvienam elementui flex-grow, lygų 1. Iš viso bus 2, tai yra 100px laisvos erdvės reikia padalinti iš 2. Pasirodo, kad 50px tenka vienam godumo vienetui.

Kadangi visi elementai turi vienodą reikšmę flex-grow, tai prie visų elementų bus pridėta vienoda reikšmė 50px. Tai reiškia, kad pirmasis elementas taps 250px, ir antrasis taps 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;
}

Pavyzdys

Tarkime, vėl tėvinio elemento plotis lygus 400px, pirmojo elemento plotis 200px, o antrojo elemento plotis - 100px.

Dabar nustatykime pirmajam elementui flex-grow reikšmę 3, o antrajam - reikšmę 1. Pasirodo, kad godumas viso yra 4. Tada vienas godumo vienetas lygus 100px / 4 = 25px.

Prie pirmojo elemento bus pridėta 75px, ir jis taps 275px, o prie antrojo - 25px, jis taps 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;
}

Taip pat žiūrėkite

savybė flex-direction,
kuri nustato flex blokų ašių kryptį
savybė justify-content,
kuri nustato lygiavimą pagrindinėje ašyje
savybė align-items,
kuri nustato lygiavimą skersinėje ašyje
savybė flex-wrap,
kuri nustato flex blokų kelių eilučių savybę
savybė flex-flow,
sutrumpinimas flex-direction ir flex-wrap
savybė order,
kuri nustato flex blokų tvarką
savybė align-self,
kuri nustato vieno bloko lygiavimą
savybė flex-basis,
kuri nustato konkretaus flex bloko dydį
savybė flex-shrink,
kuri nustato flex blokų susispaudimo savybę
savybė flex,
sutrumpinimas flex-grow, flex-shrink ir flex-basis