Flex-grow hossasy

flex-grow hossasy, zerur bolsa, aýry-ayryl flek-bloklaryň goňşy elementlerden näçerçe uly bolup biljekdigini kesgitleýär.

Mysal üçin, eger flek-kontainer içindäki ähli flek-bloklaryň flex-grow:1 bahasy bar bolsa, olar deň ölçegli bolarlar. Eger olaryň biri flex-grow:2 bahasyna eýe bolsa, onda ol galanlaryň ählisinden 2 esse uly bolar.

Eger elementleriň umumy ini ata-enesiniň ininden kiçi bolsa, şonuň üçin sagda boş ýer galýar. Isleg boýunça bu boş ýeri biz elementleriň arasynda proporsional bölüp bilersiňiz. Bu flex-grow hossasy bilen amala aşyrylýar, ýöne fleks-elementlere berilýär. Bu hossasynyň bahasy ölçegsiz sanyň özüdür.

Üns berilýär: konkret bir flek bloka.

Bu hossa ýönekeýleşdirilen hossa hökmünde flex hossasyna girýär.

Sintaksis

selektor {
	flex-grow: pozitiw san;
}

Deslapky bahasy: 0.

Mysal

Häzirki wagtda biziň iki fleks-blokymyz bardyr, ini 100px. Olaryň elementleriň umumy ini 200px, ata-enesiniň ini bolsa - 300px. Netijede, erkin giňişlik galýar 100px.

Eger elementlere flex-grow berilmedik bolsa, onda biz diňe şu erkin giňişligi göreris. Eger-de olara berilse, onda elementleriň hakyky ini berleninden uly bolar - olar proporsional erkin giňişligi özara paýlaşarlar we ony öz inişine goşarlar.

Mysal üçin, birinji element üçin flex-grow deň 1, ikinji üçin bolsa - 3 bolsun. Gelňi hasaplaýaly, erkin giňişligiň haýsy bölegini her bir element alyşar.

Ilki bilen, jemi mukdary almaly birimler flex-grow biziň ähli elementlerimiziň. Birinji elementde ol 1 deň, we ikinjisinde - 3. Bu diýmek, jemlede ol 4 deňdir.

Indi 100px erkin giňişligi 4 bölüň we alarys, 25px gelýär bir birim üçin flex-grow. Netijede, birinji elemente bir birim goşular flex-grow, ýagny 25px, we ikinji elemente - üç birim, ýagny 75px.

Birinji element ini 125px bolar, ikinjisiniňki bolsa - 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;
}

Mysal

Indi ata-enesiniň ini 400px deň bolsun, birinji element ini 200px, we ini ikinji element - 100px. Netijede, erkin giňişlik ýene-de 100px deň bolar.

Gelňi her bir elemente flex-grow bereliň, deň 1. Jemlede 2 bolar, ýagny 100px erkin giňişlik 2 bölünmeli. Netijede, 50px gelýär bir birim açgözçilige.

Häsi elementleriň deň bahasy bolany üçin flex-grow, onda ähli elementlere goşular deň baha 50px. Bu diýmek, birinji element 250px bolar, we ikinjisi 150px bolar:

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

Mysal

Ýene-de ata-enesiniň ini 400px deň bolsun, birinji element ini 200px, we ini ikinji element - 100px.

Indi birinji elemente bereliň flex-grow bahasy 3, ikinjisine bolsa - 1 bahasynda. Netijede, açgözçilik jemlede 4 deň bolar. Şonda bir birlik açgözçilik deň 100px / 4 = 25px.

Birinji elemente goşular 75px, we ol 275px bolar, ikinjisine bolsa - 25px, ol 125px bolar:

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

Şeýle-de serediň

flex-direction hossasy,
flek bloklarynyň ok ugruny berýär
justify-content hossasy,
esasy ok boýunça düzlügini berýär
align-items hossasy,
garaşsyz ok boýunça düzlügini berýär
flex-wrap hossasy,
flek bloklarynyň köp setirliligini berýär
flex-flow hossasy,
flex-direction we flex-wrap üçin ýönekeýleşdirme
order hossasy,
flek bloklarynyň tertibini berýär
align-self hossasy,
bir blok düzlügini berýär
flex-basis hossasy,
konskret flek blok ölçegini berýär
flex-shrink hossasy,
flek bloklarynyň ýuwaşlygyny berýär
flex hossasy,
flex-grow, flex-shrink we flex-basis üçin ýönekeýleşdirme