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

flex-shrink

Definice a použití

Vlastnost flex-shrink určuje, jak se bude flexibilní element zmenšovat vůči ostatním flexibilním elementům, pokud to bude potřeba. 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í jak moc se bude flexibilní element zmenšovat vůči ostatním flexibilním elementům (defaultní hodnota je 1)
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;
	flex-basis: 600px;
	flex-grow: 1;
	flex-shrink: 1;
}

#flexbox > div:nth-child(1) {
	background: rgba(255,255,0,.5);
}

#flexbox > div:nth-child(2) {
	background: rgba(0,255,0,.5);
}

#flexbox > div:nth-child(3) {
	background: rgba(0,255,255,.5);
}

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

/* Druhý flexibilní element se bude zmenšovat podle potřeby */
#flexbox > div:nth-child(2) {
	flex-shrink: 2;
}

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

HTML

Druhý flexibilní element se podřídí ostatním a zmenší se dle potřeby:
<div id="flexbox">
	<div>První div</div>
	<div>Druhý div</div>
	<div>Třetí div</div>
</div>

Použité tagy: <div>

Výsledek:

Druhý flexibilní element se podřídí ostatním a zmenší se dle potřeby:

První div

Druhý div

Třetí div

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 9

Operaversion: 17