Vetia flex-grow

Vetia flex-grow përcakton atë, sa më shumë një bllok flex individual mund të jetë më i madh se elementët fqinjë, nëse është e nevojshme.

Për shembull, nëse të gjithë bllokët flex brenda kontejnerit flex kanë flex-grow:1, atëherë ata do të jenë të njëjtës madhësi. Nëse njëri prej tyre ka flex-grow:2, atëherë ai do të jetë 2 herë më i madh se të gjithë të tjerët.

Nëse gjerësia totale e elementëve është më e vogël se gjerësia e prindit, prandaj mbetet hapësirë e lirë në të djathtë. Nëse dëshironi, kjo hapësirë e lirë mund të ndahet në mënyrë proporcionale midis elementëve tanë. Kjo bëhet me ndihmën e vetisë flex-grow, që i caktohet elementëve flex. Vlera e kësaj vetie është një numër pa dimension.

Zbatohet për: një bllok specifik flex.

Kjo veti hyn si pjesë përbërëse në vetinë e shkurtuar flex.

Sintaksa

selektor {
	flex-grow: numër pozitiv;
}

Vlera e paracaktuar: 0.

Shembull

Tani kemi dy bllokë flex me gjerësi 100px. Gjerësia e tyre totale e elementëve është 200px, ndërsa gjerësia e prindit është 300px. Kjo do të thotë se mbetet hapësirë e lirë prej 100px.

Nëse elementëve nuk u është caktuar flex-grow, atëherë thjesht do ta shohim këtë hapësirë të lirë. Nëse u është caktuar, atëherë gjerësia reale e elementëve do të jetë më e madhe se ajo e caktuar - ata në mënyrë proporcionale do ta ndajnë hapësirën e lirë mes vete dhe do ta shtojnë atë në gjerësinë e tyre.

Le të themi për shembull se elementi i parë ka flex-grow të barabartë me 1, ndërsa i dyti - 3. Le të llogarisim, se cila pjesë e hapësirës së lirë do të marrë secili element.

Fillimisht duhet të marrim sasinë totale të njësive flex-grow të të gjithë elementëve tanë. Elementi i parë e ka atë të barabartë me 1, ndërsa i dyti - 3. Kjo do të thotë se në total është 4.

Le të ndajmë tani 100px hapësirë të lirë me 4 dhe do të marrim se 25px i përket një njësie flex-grow. Do të thotë, se elementit të parë do t'i shtohet një njësi flex-grow, pra 25px, ndërsa të dytit - tre njësi, pra 75px.

Gjerësia e elementit të parë do të jetë 125px, ndërsa e të dytit - 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;
}

Shembull

Le të themi tani që gjerësia e prindit është 400px, gjerësia e elementit të parë është 200px, ndërsa gjerësia e elementit të dytë - 100px. Do të thotë, se hapësira e lirë përsëri është 100px.

Le t'i caktojmë çdo elementi flex-grow, të barabartë me 1. Në total do të jetë 2, domethënë 100px hapësirë e lirë duhet të ndahet me 2. Do të thotë se 50px i përket një njësie lakmie.

Meqenëse të gjithë elementët kanë të njëjtën vlerë flex-grow, atëherë të gjithë elementëve do t'u shtohet e njëjta vlerë prej 50px. Kjo do të thotë, se elementi i parë do të bëhet 250px, dhe i dyti do të bëhet 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;
}

Shembull

Le të themi përsëri që gjerësia e prindit është 400px, gjerësia e elementit të parë është 200px, ndërsa gjerësia e elementit të dytë - 100px.

Le t'i caktojmë tani elementit të parë flex-grow me vlerë 3, ndërsa të dytit - me vlerë 1. Do të thotë se lakmia në total është 4. Atëherë një njësi lakmie është e barabartë me 100px / 4 = 25px.

Elementit të parë do t'i shtohet 75px, dhe ai do të bëhet 275px, ndërsa të dytit - 25px, ai do të bëhet 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;
}

Shihni gjithashtu

vetia flex-direction,
e cila përcakton drejtimin e boshteve të bllokëve flex
vetia justify-content,
e cila përcakton radhitjen përgjatë boshtit kryesor
vetia align-items,
e cila përcakton radhitjen përgjatë boshtit tërthor
vetia flex-wrap,
e cila përcakton shumë-rreshtshmërinë e bllokëve flex
vetia flex-flow,
shkurtim për flex-direction dhe flex-wrap
vetia order,
e cila përcakton rendin e bllokëve flex
vetia align-self,
e cila përcakton radhitjen e një blloku të vetëm
vetia flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
vetia flex-shrink,
e cila përcakton ngjeshshmërinë e bllokëve flex
vetia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis