Vlastnosť flex-wrap

Vlastnosť flex-wrap nastavuje viacriadkové usporiadanie blokov pozdĺž hlavnej osi. Aplikuje sa na nadradený element pre flex bloky. Je súčasťou skrátenej vlastnosti flex-flow.

Syntax

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

Hodnoty

Hodnota	Popis
`nowrap`	Jednoriadkový režim - bloky sa usporiadajú do jedného riadku.
`wrap`	Bloky sa usporiadajú do viacerých riadkov, ak sa nezmestia do jedného.
`wrap-reverse`	To isté ako `wrap`, ale bloky sa usporiadajú v opačnom poradí (najprv posledný, potom prvý).

Predvolená hodnota: nowrap.

Príklad . Hodnota wrap

Teraz sa bloky nezmestia do svojho kontajnera a usporiadajú sa do viacerých riadkov:

<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;
}

Príklad . Hodnota wrap-reverse

A teraz sa poradie zmení na opačné (pozrite sa na čísla vnútri blokov):

<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;
}

Príklad . Hodnota nowrap

Teraz sa budú bloky usporadúvať v jednoriadkovom režime (takto je to predvolené). Pri tom hodnota šírky width pre bloky bude ignorovaná, ak prekáža blokom sa zmestiť do rodiča. Všimnite si, že bloky sa zmestili do rodiča, ale ich reálna šírka nie je 100px, ako je im zadaná, ale menšia:

<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;
}

Príklad . Hodnota nowrap

Avšak, ak sa bloky zmestia pri zadanej im šírke - tak vlastnosť width nebude ignorovaná. Zmenšíme počet blokov tak, aby sa všetky zmestili:

<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;
}

Pozrite 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-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-grow,
ktorá nastavuje "lakomosť" flex blokov
vlastnosť flex-shrink,
ktorá nastavuje stlačiteľnosť flex blokov
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis