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

flex-wrap

Definice a použití

Vlastnost flex-wrap určuje, zda se mají flexibilní elementy webu zalamovat nebo ne. Vlastnost má efekt pouze na dceřinné elementy elementu s display hodnotou nastavenou na flex nebo inline-flex.

Hodnoty vstupů	Popis
nowrap	Vypnutí zalamování flexibilních elementů (defaultní hodnota)
wrap	Zapnutí zalamování flexibilních elementů
wrap-reverse	Zapnutí zalamování flexibilních elementů v opačném pořadí než je směr čtení textu
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 {
	width: 50%;
	font-size: 150%;
	border: 1px solid #FF0000;
	text-align: center;
	box-sizing: border-box;
}

/* Vypnutí zalamování flexibilních elementů */
#flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
}

/* Zapnutí zalamování flexibilních elementů */
#flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

/* Zapnutí zalamování flexibilních elementů v opačném pořadí než je směr čtení textu */
#flex-wrap-reverse {
	display: flex;
	flex-wrap: wrap-reverse;
}

Použité vlastnosti: width, font-size, border, text-align, box-sizing, display, flex-wrap

HTML

Vypnutí zalamování flexibilních elementů:
<div id="flex-nowrap">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Zapnutí zalamování flexibilních elementů:
<div id="flex-wrap">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<br/>

Zapnutí zalamování flexibilních elementů v opačném pořadí než je směr čtení textu
<div id="flex-wrap-reverse">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

Použité tagy: <div>

Výsledek:

Vypnutí zalamování flexibilních elementů:

Zapnutí zalamování flexibilních elementů:

Zapnutí zalamování flexibilních elementů v opačném pořadí než je směr čtení textu

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 9

Operaversion: 17