Žravost flex elementů v CSS

Předpokládejme, že nyní máme dva flex bloky, seřazené v řadě. Těmto blokům je nastavena šířka na 100px a jejich rodiči - 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;
}

Jak vidíte, celková šířka našich prvků je menší než šířka rodiče, takže vpravo zůstává volný prostor.

V případě potřeby lze tento volný prostor poměrně rozdělit mezi naše prvky. To se provádí pomocí vlastnosti flex-grow, nastavené flex prvkům. Hodnotou této vlastnosti je bezrozměrné číslo.

Podívejme se v praxi, jak tato vlastnost funguje.

Příklad

Nyní máme dva flex bloky s šířkou 100px. Jejich celková šířka prvků je 200px a šířka rodiče je 300px. To znamená, že zbývá volný prostor 100px.

Pokud prvkům není nastaven flex-grow, jednoduše uvidíme tento volný prostor. Pokud je nastaven, pak skutečná šířka prvků bude větší než nastavená - poměrně si rozdělí volný prostor mezi sebou a přidají jej ke své šířce.

Pro příklad nastavme prvnímu prvku flex-grow hodnotu 1 a druhému - 3. Pojďme vypočítat, jakou část volného prostoru získá každý prvek.

Nejprve je potřeba získat celkový počet jednotek flex-grow všech našich prvků. U prvního prvku je hodnota 1 a u druhého - 3. To znamená, že součet je 4.

Nyní vydělme 100px volného prostoru 4 a dostaneme, že 25px připadá na jednu jednotku flex-grow. Vyplývá z toho, že k prvnímu prvku přibude jedna jednotka flex-grow, tedy 25px, a ke druhému - tři jednotky, tedy 75px.

Šířka prvního prvku bude 125px, a druhého - 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říklad

Nyní předpokládejme, že šířka rodiče je 400px, šířka prvního prvku 200px a šířka druhého prvku - 100px. Vyplývá z toho, že volný prostor je opět 100px.

Nastavme každému prvku flex-grow, hodnotu 1. Součet bude 2, to znamená, že 100px volného prostoru je třeba rozdělit na 2. Vyplývá z toho, že 50px připadá na jednu jednotku žravosti.

Protože všechny prvky mají stejnou hodnotu flex-grow, pak ke všem prvkům přibude stejná hodnota 50px. To znamená, že první prvek bude 250px, a druhý prvek bude 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říklad

Předpokládejme opět, že šířka rodiče je 400px, šířka prvního prvku 200px a šířka druhého prvku - 100px.

Nyní nastavme prvnímu prvku flex-grow na hodnotu 3 a druhému - na hodnotu 1. Vyplývá z toho, že žravost v součtu je 4. Pak jedna jednotka žravosti se rovná 100px / 4 = 25px.

K prvnímu prvku přibude 75px, a bude 275px, a ke druhému - 25px, bude 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;
}

Praktické úlohy

Ve všech níže uvedených úlohách vám bude představen nějaký kód s flex prvky, které mají šířku a flex-grow. Podle představeného kódu vypočítejte, jaké rozměry bude mít každý z prvků. Poté kód spusťte a ověřte své výpočty změřením skutečných šířek prvků.

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