Egenskapen flex-wrap

Egenskapen flex-wrap anger flerradig placering av block längs huvudaxeln. Tillämpas på föräldraelementet för flex-block. Ingår i sammanslagen egenskap flex-flow.

Syntax

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

Värden

Värde	Beskrivning
`nowrap`	Enradsläge - blocken ordnas i en rad.
`wrap`	Blocken ordnas i flera rader om de inte får plats på en rad.
`wrap-reverse`	Samma som `wrap`, men blocken ordnas i omvänd ordning (först den sista, sedan den första).

Standardvärde: nowrap.

Exempel . Värdet wrap

Nu får blocken inte plats i sin container och kommer att ordnas i flera rader:

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

Exempel . Värdet wrap-reverse

Och nu ändras ordningsföljden till omvänd (titta på siffrorna inuti blocken):

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

Exempel . Värdet nowrap

Nu kommer blocken att placeras i enradsläge (som standard). Då kommer värdet bredd width för blocken att ignoreras, om det hindrar blocken från att få plats i föräldern. Lägg märke till att blocken fick plats i föräldern, men deras faktiska bredd är inte 100px, som de har angetts, utan 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;
}

Exempel . Värdet nowrap

Men om blocken får plats med den angivna bredden - så kommer egenskapen width inte att ignoreras. Låt oss minska antalet block så att alla får plats:

<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 även

egenskapen flex-direction,
som anger riktningen på flex-blockens axlar
egenskapen justify-content,
som anger justering längs huvudaxeln
egenskapen align-items,
som anger justering längs tväraxeln
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som anger ordningen på flex-block
egenskapen align-self,
som anger justering av ett enskilt block
egenskapen flex-basis,
som anger storleken på ett specifikt flex-block
egenskapen flex-grow,
som anger flex-blocks "glupskhet"
egenskapen flex-shrink,
som anger flex-blocks krympbarhet
egenskapen flex,
förkortning för flex-grow, flex-shrink och flex-basis