Flex elementų godumas CSS

Tarkime, kad dabar turime du flex blokus, išdėstytus iš eilės. Šiems blokams nustatytas plotis 100px, o jų tėviniam elementui - 300px:

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

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Kaip matote, mūsų elementų bendras plotis mažesnis už tėvinio elemento plotį, todėl dešinėje lieka laisva erdvė.

Jei norima, ši laisva 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.

Pažiūrėkime praktiškai, kaip veikia ši savybė.

Pavyzdys

Dabar turime du flex blokus, kurių plotis 100px. Jų bendras elementų 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 nustatyta, tai tikrasis 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. Paskaičiuokime, kokią laisvos erdvės dalį gaus kiekvienas elementas.

Pirmiausia reikia gauti bendrą flex-grow vienetų skaičių visų mūsų elementų. 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 dabar tėvinio elemento plotis lygus 400px, pirmojo elemento plotis 200px, o plotis antrojo elemento - 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 plotis antrojo elemento - 100px.

Dabar pirmajam elementui nustatykime flex-grow reikšmę 3, o antrajam - reikšmę 1. Pasirodo, kad godumas viso yra 4. Tada vienas godumo vienetas yra 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;
}

Praktinės užduotys

Visose žemiau pateiktose užduotyse jums bus pateiktas tam tikras kodas su flex elementais, turinčiais plotį ir flex-grow. Pagal pateiktą kodą apskaičiuokite, kokius matmenis turės kiekvienas elementas. Tada paleiskite kodą ir patikrinkite savo skaičiavimus, išmatuodami tikruosius elementų plotius.

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

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

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

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

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

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

<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>

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