WebDev.wiki > CSS > CSS vlastnosti a hodnoty > flex-grow

flex-grow

Definice a použití

Vlastnost flex-grow určuje, kolikrát má flexibilní element vyrůst vůči ostatním flexibilním elementům. Vlastnost má efekt pouze na elementy, které jsou dceřinnými elementy elementu s display nastaveným na flex nebo inline-flex.

Hodnoty vstupů	Popis
číslo	Číslo určující kolikrát má flexibilní element vyrůst vůči ostatním flexibilním elementům (defaultní hodnota je 0)
initial	Nastaví hodnotu na defaultní
inherit	Dědí hodnotu od mateřského elementu

Ukázka:

CSS

/* CSS pro lepší čitelnost ukázky */
div div {
	font-size: 150%;
	border: 1px solid #FF0000;
	text-align: center;
}

/* Vytvoříme si flexbox */
#flexbox {
	display: flex;
}

/* Každý dceřinný element flexboxu bude dvakrát větší než ten předchozí */
#flexbox > div:nth-child(1) {
	flex-grow: 1;
}

#flexbox > div:nth-child(2) {
	flex-grow: 2;
}

#flexbox > div:nth-child(3) {
	flex-grow: 4;
}

Použité vlastnosti: font-size, border, text-align, display, flex-grow

HTML

Každý div má nastavenou vlastnost flex-grow na dvojnásobek jeho levého souseda:
<div id="flexbox">
	<div>První div</div>
	<div>Druhý div</div>
	<div>Třetí div</div>
</div>

Použité tagy: <div>

Výsledek:

Každý div má nastavenou vlastnost flex-grow na dvojnásobek jeho levého souseda:

První div

Druhý div

Třetí div

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 9

Operaversion: 17