Vlastnost flex-wrap

Vlastnost flex-wrap nastavuje víceřádkové uspořádání bloků podél hlavní osy. Aplikuje se na nadřazený prvek flex bloků. Je součástí zkrácené vlastnosti flex-flow.

Syntaxe

selektor {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Hodnoty

Hodnota	Popis
`nowrap`	Jednořádkový režim - bloky se seřadí do jednoho řádku.
`wrap`	Bloky se seřadí do více řádků, pokud se nevejdou do jednoho.
`wrap-reverse`	To samé jako `wrap`, ale bloky se seřadí v opačném pořadí (nejprve poslední, poté první).

Výchozí hodnota: nowrap.

Příklad . Hodnota wrap

Nyní se bloky nevejdou do svého kontejneru a seřadí se do několika řádků:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Příklad . Hodnota wrap-reverse

A nyní se pořadí změní na opačné (sledujte čísla uvnitř bloků):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Příklad . Hodnota nowrap

Nyní se budou bloky uspořádávat v jednořádkovém režimu (tak je to ve výchozím nastavení). Přitom hodnota šířky width pro bloky bude ignorována, pokud brání blokům vejít se do nadřazeného prvku. Všimněte si, že bloky se do nadřazeného prvku vešly, ale jejich skutečná šířka není 100px, jak je zadáno, ale méně:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Příklad . Hodnota nowrap

Avšak, pokud se bloky vejdou při zadané šířce - vlastnost width nebude ignorována. Snížíme počet bloků tak, aby se všechny vešly:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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-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-grow,
která nastavuje "lakotu" flex bloků
vlastnost flex-shrink,
která nastavuje stlačitelnost flex bloků
vlastnost flex,
zkratka pro flex-grow, flex-shrink a flex-basis