A flex elemek kapzsisága CSS-ben

Tegyük fel, hogy van két flex blokkunk, amelyek sorba rendeződnek. Ezeknek a blokkoknak a szélessége 100px, a szülőjüké pedig 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Amint látható, az elemeink összes szélessége kisebb, mint a szülő szélessége, ezért jobb oldalon szabad teret hagy.

Ha szükséges, ezt a szabad teret arányosan el lehet osztani az elemeink között. Ezt a flex-grow tulajdonsággal tehetjük meg, amelyet a flex elemeknek adunk meg. Ennek a tulajdonságnak az értéke egy dimenzió nélküli szám.

Nézzük meg gyakorlatban, hogyan működik ez a tulajdonság.

Példa

Jelenleg 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 tér marad.

Ha az elemeknek nincs megadva a flex-grow, akkor egyszerűen látni fogjuk ezt a szabad teret. Ha viszont meg van adva, akkor az elemek valós szélessége nagyobb lesz a megadottnál - arányosan elosztják a szabad teret egymás között és hozzáadják a saját szélességükhöz.

Tegyük fel például, hogy az első elem flex-grow értéke 1, a másodiké pedig 3. Számoljuk ki, hogy a szabad teremből mekkora részt kap minden egyes elem.

Először meg kell határoznunk az összes flex-grow egység összegét. Az első elemnél ez 1, a másodiknál pedig 3. Ez azt jelenti, hogy összesen 4.

Osszuk el most a 100px szabad teret 4-el, és azt kapjuk, hogy 25px jut egy flex-grow egységre. Így az első elemhez egy flex-grow egység, azaz 25px adódik hozzá, 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

Tegyük fel most, hogy 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 tér ismét 100px lesz.

Adjunk meg minden elemnek flex-grow-t, értéke 1. Összesen 2 lesz, tehát a 100px szabad teret el kell osztani 2-vel. Így 50px jut egy kapzsisági egységre.

Mivel minden elemnek ugyanaz a flex-grow értéke, ezért minden elemhez ugyanannyi, 50px adódik hozzá. Ez azt jelenti, hogy az első elem 250px lesz, és a második 150px 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: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Példa

Tegyük fel ismét, hogy 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 pedig 1-re. Így a kapzsiság összesen 4 lesz. Ekkor egy kapzsisági egység 100px / 4 = 25px.

Az első elemhez 75px adódik hozzá, így 275px lesz, a másodikhoz pedig 25px, így az 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;
}

Gyakorlati feladatok

Az alábbi feladatokban egy kódot láttok flex elemekkel, amelyeknek van szélessége és flex-grow értéke. A megadott kód alapján számoljátok ki, milyen méretei lesznek minden egyes elemnek. Ezután futtassátok a kódot és ellenőrizzétek a számításaitokat, megmérve a valós szélességeket.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	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;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 1000px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 100px;
	flex-grow: 4;
}
.elem4 {
	width: 100px;
	flex-grow: 3;
}