Egenskaben flex-wrap

Egenskaben flex-wrap angiver flerlinjet placering af blokke langs hovedaksen. Anvendes på forældreelementet for flex blokke. Indgår i sammentrukket egenskab flex-flow.

Syntaks

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

Værdier

Værdi	Beskrivelse
`nowrap`	Enkeltlinjetilstand - blokkene arrangeres på én linje.
`wrap`	Blokkene arrangeres på flere linjer, hvis de ikke passer på én.
`wrap-reverse`	Det samme som `wrap`, men blokkene arrangeres i omvendt rækkefølge (først den sidste, derefter den første).

Standardværdi: nowrap.

Eksempel . Værdien wrap

Nu passer blokkene ikke i deres container og vil arrangere sig på flere linjer:

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

Eksempel . Værdien wrap-reverse

Nu ændres rækkefølgen til omvendt (se tallene inde i blokkene):

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

Eksempel . Værdien nowrap

Nu vil blokkene være placeret i enkeltlinjetilstand (som standard). I dette tilfælde vil værdien for bredden width for blokkene blive ignoreret, hvis det forhindrer blokkene i at passe i forælderen. Læg mærke til, at blokkene passede i forælderen, men deres faktiske bredde ikke er 100px, som de er angivet til, men mindre:

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

Eksempel . Værdien nowrap

Hvis blokkene derimod passer med den angivne bredde - så vil egenskaben width ikke blive ignoreret. Lad os reducere antallet af blokke så de alle kan passe:

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

Se også

egenskaben flex-direction,
som angiver retningen af flex-blokkenes akser
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs tværaksen
egenskaben flex-flow,
sammentrækning for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex-blokke
egenskaben align-self,
som angiver justering af en enkelt blok
egenskaben flex-basis,
som angiver størrelsen på en bestemt flex-blok
egenskaben flex-grow,
som angiver flex-blokkenes grådighed
egenskaben flex-shrink,
som angiver flex-blokkenes komprimerbarhed
egenskaben flex,
sammentrækning for flex-grow, flex-shrink og flex-basis