A flex-grow tulajdonság

A flex-grow tulajdonság határozza meg, hogy egy adott flex blokk mennyivel lehet nagyobb a szomszédos elemeknél, ha az szükséges.

Például, ha egy flex-konténerben minden flex blokk értéke flex-grow:1, akkor azonos méretűek lesznek. Ha az egyik értéke flex-grow:2, akkor 2-szer nagyobb lesz, mint az összes többi.

Ha az elemek összesített szélessége kisebb, mint a szülő szélessége, üres hely marad jobbra. Ha szeretnénk, ezt az üres helyet arányosan eloszthatjuk az elemeink között. Ezt a flex-grow tulajdonsággal tehetjük meg, amelyet a flex-elemekre állítunk be. Ennek a tulajdonságnak az értéke egy dimenzió nélküli szám.

Alkalmazása: egy adott flex blokkra.

Ez a tulajdonság része a rövidített flex tulajdonságnak.

Szintaxis

selector {
	flex-grow: pozitív szám;
}

Alapértelmezett érték: 0.

Példa

Most két flex blokkunk van, szélességük 100px. Az elemek összesített szélessége 200px, a szülő szélessége pedig 300px. Így 100px szabad hely marad.

Ha az elemeknek nincs beállítva flex-grow, akkor egyszerűen látni fogjuk ezt a szabad területet. Ha viszont be van állítva, akkor az elemek valódi szélessége nagyobb lesz a megadottnál - arányosan elosztják a szabad területet maguk között és hozzáadják a saját szélességükhöz.

Például legyen az első elem flex-grow értéke 1, a másodiké pedig 3. Számoljuk ki, hogy a szabad hely mekkora részét kapja minden elem.

Először meg kell határoznunk az összes flex-grow egység összegét. Az első elem értéke 1, a másodiké 3. Ez azt jelenti, hogy az összeg 4.

Osszuk el a 100px szabad helyet 4-gyel, így 25px jut egy flex-grow egységre. Így az első elemhez egy egység flex-grow adódik, azaz 25px, a másodikhoz pedig három egység, azaz 75px.

Az első elem szélessége 125px lesz, a másodiké pedig 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;
}

Példa

Legyen most a szülő szélessége 400px, az első elem szélessége 200px, a második elem szélessége pedig 100px. Így a szabad hely ismét 100px.

Állítsuk be minden elem flex-grow értékét 1-re. Összesen 2 lesz, azaz a 100px szabad helyet el kell osztani 2-vel. Így 50px jut egy kapzsisági egységre.

Mivel minden elem flex-grow értéke azonos, ezért minden elemhez ugyanannyi, 50px adódik. Ez azt jelenti, hogy az első elem 250px lesz, a második pedig 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;
}

Példa

Legyen ismét a szülő szélessége 400px, az első elem szélessége 200px, a második elem szélessége pedig 100px.

Állítsuk most az első elem flex-grow értékét 3-ra, a második ét 1-re. Így a kapzsiság összesen 4. Ekkor egy egység kapzsiság 100px / 4 = 25px.

Az első elemhez 75px adódik, így 275px lesz, a másodikhoz pedig 25px, így 125px lesz:

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

Lásd még

a flex-direction tulajdonság,
amely a flex blokkok tengelyeinek irányát határozza meg
a justify-content tulajdonság,
amely a főtengely mentén igazít
a align-items tulajdonság,
amely a keresztirányú tengely mentén igazít
a flex-wrap tulajdonság,
amely a flex blokkok többsoros voltát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egy blokk igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex blokk méretét határozza meg
a flex-shrink tulajdonság,
amely a flex blokkok összehúzhatóságát határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára