Vlastnost flex-grow

Vlastnost flex-grow určuje, o kolik může být jednotlivý flex-blok větší než sousední prvky, pokud je to potřeba.

Například, pokud všechny flex-bloky uvnitř flex-kontejneru mají flex-grow:1, budou stejné velikosti. Pokud jeden z nich má flex-grow:2, bude 2krát větší než všechny ostatní.

Pokud je celková šířka prvků menší než šířka rodiče, zůstává vpravo prázdný prostor. V případě potřeby lze tento prázdný prostor poměrně rozdělit mezi naše prvky. To se provádí pomocí vlastnosti flex-grow, která se nastavuje flex-prvkům. Hodnotou této vlastnosti je bezrozměrné číslo.

Platí pro: konkrétní flex blok.

Tato vlastnost vstupuje jako součást do zkratkové vlastnosti flex.

Syntaxe

selektor {
	flex-grow: kladné číslo;
}

Výchozí hodnota: 0.

Příklad

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

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

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

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

Nyní vydělme 100px volného prostoru 4 a dostaneme, že na jednu jednotku flex-grow připadá 25px. Výsledek je, že k prvnímu prvku se přidá 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í mějme šířku rodiče rovnu 400px, šířku prvního prvku 200px a šířku druhého prvku - 100px. Výsledek je, že volný prostor je opět roven 100px.

Nastavme každému prvku flex-grow, rovný 1. Celkem vyjde 2, to znamená, že 100px volného prostoru je třeba rozdělit na 2. Výsledek je, že na jednu jednotku lakoty připadá 50px.

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

Nechť je opět šířka rodiče rovna 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. Výsledek je, že lakota celkem je rovna 4. Pak jedna jednotka lakoty je rovna 100px / 4 = 25px.

K prvnímu prvku se přidá 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;
}

Viz také

vlastnost flex-direction,
která nastavuje směr os flex bloků
vlastnost justify-content,
která nastavuje zarovnání podél hlavní osy
vlastnost align-items,
která nastavuje zarovnání podél příčné osy
vlastnost flex-wrap,
která nastavuje vícenásobný řádek flex bloků
vlastnost flex-flow,
zkratka pro flex-direction a flex-wrap
vlastnost order,
která nastavuje pořadí flex bloků
vlastnost align-self,
která nastavuje zarovnání jednoho bloku
vlastnost flex-basis,
která nastavuje velikost konkrétního flex bloku
vlastnost flex-shrink,
která nastavuje stlačitelnost flex bloků
vlastnost flex,
zkratka pro flex-grow, flex-shrink a flex-basis