Vlastnosť flex-grow

Vlastnosť flex-grow určuje, o koľko môže byť jednotlivý flex blok väčší ako susedné prvky, ak je to potrebné.

Napríklad, ak všetky flex bloky vo flex kontajnery majú flex-grow:1, budú mať rovnakú veľkosť. Ak jeden z nich má flex-grow:2, bude 2 krát väčší ako všetky ostatné.

Ak súhrnná šírka prvkov je menšia ako šírka rodiča, napravo zostáva prázdny priestor. Ak je to žiaduce, tento prázdny priestor je možné proporcionálne rozdeliť medzi naše prvky. To sa robí pomocou vlastnosti flex-grow, ktorá sa nastavuje flex prvkom. Hodnotou tohto vlastnosti je bezrozmerné číslo.

Platí pre: konkrétny flex blok.

Táto vlastnosť vstupuje ako zložková časť do skrátenej vlastnosti flex.

Syntax

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

Predvolená hodnota: 0.

Príklad

Teraz máme dva flex bloky so šírkou 100px. Ich súhrnná šírka prvkov je 200px, a šírka rodiča je 300px. To znamená, že zostáva voľný priestor 100px.

Ak prvkom nie je nastavený flex-grow, jednoducho uvidíme tento voľný priestor. Ak je im nastavený, skutočná šírka prvkov bude väčšia ako zadaná - proporcionálne si rozdelia voľný priestor medzi sebou a pridajú ho k svojej šírke.

Napríklad, nech prvý prvok má flex-grow rovný 1, a druhý - 3. Poďme vypočítať, akú časť voľného priestoru získa každý prvok.

Najprv je potrebné získať súhrnný počet jendnotiek flex-grow všetkých našich prvkov. Prvý prvok má hodnotu 1, a druhý - 3. To znamená, že súčet je 4.

Teraz vydeľme 100px voľného priestoru 4 a dostaneme, že 25px pripadá na jednu jednotku flex-grow. To znamená, že k prvému prvku sa pridá jedna jednotka flex-grow, teda 25px, a k druhému - tri jednotky, teda 75px.

Šírka prvé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;
}

Príklad

Nech je teraz šírka rodiča rovná 400px, šírka prvého prvku 200px, a šírka druhého prvku - 100px. To znamená, že voľný priestor je opäť rovný 100px.

Nastavme každému prvku flex-grow, rovný 1. V súčte dostaneme 2, to znamená, že 100px voľného priestoru je potrebné rozdeliť na 2. To znamená, že 50px pripadá na jednu jendnotku lakomstva.

Pretože všetky prvky majú rovnakú hodnotu flex-grow, ku všetkým prvkom sa pridá rovnaká hodnota 50px. To znamená, že prvý prvok bude mať 250px, a druhý bude mať 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;
}

Príklad

Nech je opäť šírka rodiča rovná 400px, šírka prvého prvku 200px, a šírka druhého prvku - 100px.

Nastavme teraz prvému prvku flex-grow na hodnotu 3, a druhému - na hodnotu 1. To znamená, že lakomstvo v súčte je 4. Potom jedna jednotka lakomstva je rovná 100px / 4 = 25px.

K prvému prvku sa pridá 75px, a bude mať 275px, a k druhému - 25px, bude mať 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;
}

Pozri tiež

vlastnosť flex-direction,
ktorá nastavuje smer osí flex blokov
vlastnosť justify-content,
ktorá nastavuje zarovnanie pozdĺž hlavnej osi
vlastnosť align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi
vlastnosť flex-wrap,
ktorá nastavuje viacriadkovosť flex blokov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex blokov
vlastnosť align-self,
ktorá nastavuje zarovnanie jedného bloku
vlastnosť flex-basis,
ktorá nastavuje veľkosť konkrétneho flex bloku
vlastnosť flex-shrink,
ktorá nastavuje stlačiteľnosť flex blokov
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis