Die flex-wrap eienskap

Die eienskap flex-wrap spesifiseer multi-lyn rangskikking van blokke volgens die hoof-as. Word toegepas op die ouer element vir flex blokke. Maak deel uit van die kortnotasie-eienskap flex-flow.

Sintaksis

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

Waardes

Waarde	Beskrywing
`nowrap`	Enkel-lyn modus - blokke word in een lyn gerangskik.
`wrap`	Blokke word in verskeie lyne gerangskik as hulle nie in een pas nie.
`wrap-reverse`	Dieselfde as `wrap`, maar blokke word in 'n ander volgorde gerangskik (eers die laaste, dan die eerste).

Verstekwaarde: nowrap.

Voorbeeld . Waarde wrap

Tans pas die blokke nie in hul houer nie en sal in verskeie lyne gerangskik word:

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

Voorbeeld . Waarde wrap-reverse

En nou sal die volgorde omgekeer word (kyk na die syfers binne die blokke):

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

Voorbeeld . Waarde nowrap

Tans sal blokke in die enkel-lyn modus gerangskik word (dit is die verstek). In hierdie geval sal die breedtewaarde width vir blokke geïgnoreer word, as dit verhoed dat blokke in die ouer pas. Let daarop dat die blokke in die ouer gepas het, maar hul werklike breedte is nie 100px nie, soos vir hulle gestel, maar minder:

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

Voorbeeld . Waarde nowrap

Indien blokke egter pas by die toegekende breedte - dan sal die eienskap width nie geïgnoreer word nie. Laat ons die aantal blokke verminder sodat hulle almal inpas:

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

Sien ook

die eienskap flex-direction,
wat die rigting van die asse van flex blokke spesifiseer
die eienskap justify-content,
wat belyning volgens die hoof-as spesifiseer
die eienskap align-items,
wat belyning volgens die dwars-as spesifiseer
die eienskap flex-flow,
die kortnotasie vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex blokke spesifiseer
die eienskap align-self,
wat die belyning van een blok spesifiseer
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex blok spesifiseer
die eienskap flex-grow,
wat die gretigheid van flex blokke spesifiseer
die eienskap flex-shrink,
wat die inkrimpbaarheid van flex blokke spesifiseer
die eienskap flex,
die kortnotasie vir flex-grow, flex-shrink en flex-basis