Omadus flex-grow

Omadus flex-grow määrab selle, kui palju üksik flex-blokk võib olla suurem kui naaberelemendid, kui see on vajalik.

Näiteks kui kõik flex-blokid flex-mahuti sees on määratud flex-grow:1, siis on need ühesuurused. Kui ühel neist on flex-grow:2, siis on see 2 korda suurem kui kõik teised.

Kui elementide kogulaius on väiksem kui vanema laius, jääb paremale tühja ruumi. Soovi korral saab seda tühja ruumi võrdeliselt elementide vahel ära jagada. See tehakse kasutades omadust flex-grow, mida määratakse flex-elementidele. Selle omaduse väärtuseks on mõõtmeteta number.

Kehtib: konkreetsele flex-blokile.

See omadus kuulub lühendatud omaduse flex koosseisu.

Süntaks

valija {
	flex-grow: positiivne arv;
}

Vaikeväärtus: 0.

Näide

Praegu on meil kaks flex-blokki laiusega 100px. Nende kogulaius on 200px, aga vanema laius on 300px. Seega jääb vaba ruumi 100px.

Kui elementidel pole määratud flex-grow, siis me lihtsalt näeme seda vaba ruumi. Kui see on neile määratud, siis elementide tegelik laius on suurem kui määratud - nad jagavad vaba ruumi võrdeliselt enda vahel ja lisavad selle oma laiusele.

Olgu näiteks esimesel elemendil flex-grow väärtusega 1 ja teisel - 3. Arvutame, kui suure osa vabast ruumist iga element saab.

Kõigepealt tuleb leida kogu flex-grow ühikute arv kõigil meie elementidel. Esimesel elemendil on see 1 ja teisel - 3. See tähendab, et kokku on see 4.

Jagame nüüd 100px vaba ruumi 4-ga ja saame, et 25px langeb ühele flex-grow ühikule. See tähendab, et esimesele elemendile lisandub üks ühik flex-grow, see on 25px, aga teisele - kolm ühikut, see on 75px.

Esimese elemendi laius saab 125px, ja teise - 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;
}

Näide

Olgu nüüd vanema laius 400px, esimese elemendi laius 200px, ja teise elemendi laius - 100px. See tähendab, et vaba ruumi on jälle 100px.

Määrame igale elemendile flex-grow väärtusega 1. Kokku saab 2, see tähendab, et 100px vaba ruumi tuleb jagada 2-ga. See tähendab, et 50px langeb ühele ahnuse ühikule.

Kuna kõigil elementidel on sama väärtus flex-grow, siis kõikidele elementidele lisandub sama väärtus, 50px. See tähendab, et esimene element muutub 250px, ja teine muutub 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;
}

Näide

Olgu jälle vanema laius 400px, esimese elemendi laius 200px, ja teise elemendi laius - 100px.

Määrame nüüd esimesele elemendile flex-grow väärtuseks 3, ja teisele - väärtuseks 1. See tähendab, et ahnus kokku on 4. Siis on üks ahnuse ühik võrdne 100px / 4 = 25px.

Esimesele elemendile lisandub 75px, ja sellest saab 275px, aga teisele - 25px, sellest saab 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;
}

Vaata ka

omadus flex-direction,
mis määrab flex-blokkide telgede suuna
omadus justify-content,
mis määrab joonduse põhitelje suunas
omadus align-items,
mis määrab joonduse risttelje suunas
omadus flex-wrap,
mis määrab flex-blokkide mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-blokkide järjekorra
omadus align-self,
mis määrab üksiku bloki joonduse
omadus flex-basis,
mis määrab konkreetse flex-bloki suuruse
omadus flex-shrink,
mis määrab flex-blokkide kokkutõmbumise
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks