Eigenschap flex-wrap

De eigenschap flex-wrap specificeert de meerdere regels opstelling van blokken langs de hoofdas. Wordt toegepast op het bovenliggende element voor flex blokken. Maakt deel uit van de shorthand-eigenschap flex-flow.

Syntaxis

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

Waarden

Waarde	Beschrijving
`nowrap`	Enkele regel modus - blokken worden op één regel geplaatst.
`wrap`	Blokken worden op meerdere regels geplaatst als ze niet op één regel passen.
`wrap-reverse`	Hetzelfde als `wrap`, maar de blokken worden in omgekeerde volgorde geplaatst (eerst de laatste, dan de eerste).

Standaardwaarde: nowrap.

Voorbeeld . Waarde wrap

Nu passen de blokken niet in hun container en zullen ze op meerdere regels worden geplaatst:

<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 nu verandert de volgorde in omgekeerde richting (kijk naar de cijfers in de blokken):

<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

Nu zullen de blokken in de enkele regel modus worden geplaatst (zoals standaard). Hierbij wordt de waarde van de breedte width voor de blokken genegeerd, als het ervoor zorgt dat de blokken niet in de ouder passen. Let op: de blokken passen in de ouder, maar hun werkelijke breedte is niet 100px, zoals ingesteld, 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

Echter, als de blokken passen bij de ingestelde breedte - dan wordt de eigenschap width niet genegeerd. Laten we het aantal blokken verminderen zodat ze allemaal passen:

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

Zie ook

eigenschap flex-direction,
die de richting van de assen van flex blokken specificeert
eigenschap justify-content,
die de uitlijning langs de hoofdas specificeert
eigenschap align-items,
die de uitlijning langs de kruisas specificeert
eigenschap flex-flow,
shorthand voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex blokken specificeert
eigenschap align-self,
die de uitlijning van één blok specificeert
eigenschap flex-basis,
die de grootte van een specifiek flex blok specificeert
eigenschap flex-grow,
die de "gulzigheid" van flex blokken specificeert
eigenschap flex-shrink,
die de krimpfactor van flex blokken specificeert
eigenschap flex,
shorthand voor flex-grow, flex-shrink en flex-basis