Omadus flex-wrap

Omadus flex-wrap määrab mitmerealise plokkide paigutuse põhiteljel. Rakendatakse vanemelemendile flex plokkide jaoks. Kuulub lühendatud omadusse flex-flow.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`nowrap`	Üherežiim - plokid paigutatakse ühte ritta.
`wrap`	Plokid paigutatakse mitmele reale, kui need ei mahu ühte ritta.
`wrap-reverse`	Sama, mis `wrap`, kuid plokid paigutatakse vastupidises järjekorras (kõigepealt viimane, siis esimene).

Vaikeväärtus: nowrap.

Näide . Väärtus wrap

Nüüd plokid ei mahu oma konteinerisse ja paigutatakse mitmele reale:

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

Näide . Väärtus wrap-reverse

Nüüd muutub järjekord vastupidiseks (vaadake numbreid plokkide sees):

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

Näide . Väärtus nowrap

Nüüd paigutatakse plokid üherežiimis (vaikimisi nii). Sel juhul ignoreeritakse plokkide laiuse väärtust width, kui see takistab plokkidel vanemasse mahumist. Pange tähele, et plokid mahuvad vanemasse, kuid nende tegelik laius ei ole 100px, nagu neile on määratud, vaid väiksem:

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

Näide . Väärtus nowrap

Kuid kui plokid mahuvad neile määratud laiusega - siis omadust width ei ignoreerita. Vähendame plokkide arvu nii, et need kõik mahuksid:

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

Vaata ka

omadus flex-direction,
mis määrab flex plokkide telgede suuna
omadus justify-content,
mis määrab joonduse põhiteljel
omadus align-items,
mis määrab joonduse ristteljel
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex plokkide järjekorra
omadus align-self,
mis määrab ühe ploki joonduse
omadus flex-basis,
mis määrab konkreetse flex ploki suuruse
omadus flex-grow,
mis määrab flex plokkide ahnuse
omadus flex-shrink,
mis määrab flex plokkide kokkutõmbumise
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks