Flex-grow īpašība

Īpašība flex-grow nosaka to, cik daudz atsevišķs flex-bloks var būt lielāks par blakus esošajiem elementiem, ja tas ir nepieciešams.

Piemēram, ja visiem flex-blokiem flex-kontainerī ir flex-grow:1, tad tie būs vienāda izmēra. Ja vienam no tiem ir flex-grow:2, tad tas būs 2 reizes lielāks par visiem pārējiem.

Ja elementu kopējais platums ir mazāks par vecāka elementa platumu, tad labajā pusē paliek tukša vieta. Vēloties, šo tukšo vietu var proporcionāli sadalīt starp mūsu elementiem. Tas tiek darīts, izmantojot īpašību flex-grow, kas tiek piešķirta fleks-elementiem. Šīs īpašības vērtība ir bezdimensijas skaitlis.

Attiecas uz: konkrētu flex bloku.

Šī īpašība ietilpst kā sastāvdaļa saīsinātajā īpašībā flex.

Sintakse

selektors {
	flex-grow: pozitīvs skaitlis;
}

Noklusējuma vērtība: 0.

Piemērs

Šobrīd mums ir divi fleks-bloki ar platumu 100px. To kopējais platums 200px, bet vecāka elementa platums - 300px. Izrādās, ka paliek brīva vieta 100px.

Ja elementiem nav norādīts flex-grow, tad mēs vienkārši ieraudzīsim šo brīvo vietu. Ja tas tiem ir norādīts, tad elementu reālais platums būs lielāks par norādīto - tie proporcionāli sadālīs brīvo vietu starp sevi un pievienos to savam platumam.

Piemēram, lai pirmajam elementam flex-grow būtu vienāds ar 1, bet otrajam - 3. Aprēķināsim, kādu daļu no brīvās vietas saņems katrs elements.

Vispirms jāiegūst kopējais flex-grow vienību skaits visos mūsu elementos. Pirmajam elementam tas ir 1, bet otrajam - 3. Tas nozīmē, ka kopā tas ir vienāds ar 4.

Tagad sadalīsim 100px brīvās vietas ar 4 un iegūsim, ka 25px pienākas vienai flex-grow vienībai. Izrādīsies, ka pie pirmā elementa tiks pievienota viena vienība flex-grow, tas ir 25px, bet pie otrā - trīs vienības, tas ir 75px.

Pirmā elementa platums būs 125px, bet otrā - 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;
}

Piemērs

Lai tagad vecāka elementa platums būtu vienāds ar 400px, pirmā elementa platums 200px, bet otrā elementa platums - 100px. Izrādīsies, ka brīvā vieta atkal vienāda ar 100px.

Piešķirsim katram elementam flex-grow, vienādu ar 1. Kopā sanāks 2, tas ir, 100px brīvās vietas jāsadala ar 2. Sanāks, ka 50px pienākas vienai alkatības vienībai.

Tā kā visiem elementiem ir vienāda vērtība flex-grow, tad visiem elementiem tiks pievienota vienāda vērtība 50px. Tas nozīmē, ka pirmais elements kļūs 250px, un otrais kļūs 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;
}

Piemērs

Lai atkal vecāka elementa platums būtu vienāds ar 400px, pirmā elementa platums 200px, bet otrā elementa platums - 100px.

Tagad piešķirsim pirmajam elementam flex-grow vērtību 3, bet otrajam - vērtībā 1. Sanāks, ka alkatība kopā ir vienāda ar 4. Tad viena vienība alkatības ir vienāda ar 100px / 4 = 25px.

Pirmajam elementam tiks pievienoti 75px, un tas kļūs 275px, bet otrajam - 25px, tas kļūs 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;
}

Skatiet arī

īpašība flex-direction,
kas nosaka flex bloku asu virzienu
īpašība justify-content,
kas nosaka izlīdzināšanu pa galveno asi
īpašība align-items,
kas nosaka izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kas nosaka flex bloku daudzrinduīgumu
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas nosaka flex bloku secību
īpašība align-self,
kas nosaka viena bloka izlīdzināšanu
īpašība flex-basis,
kas nosaka konkrēta flex bloka izmēru
īpašība flex-shrink,
kas nosaka flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis