Egenskapen flex-wrap

Egenskapen flex-wrap angir flerlinjet plassering av blokker langs hovedaksen. Brukes på foreldreelementet for flex-blokker. Inngår i sammensatt egenskap flex-flow.

Syntaks

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

Verdier

Verdi	Beskrivelse
`nowrap`	Enkeltlinjemodus - blokkene ordnes i én linje.
`wrap`	Blokkene ordnes i flere linjer hvis de ikke får plass på én.
`wrap-reverse`	Det samme som `wrap`, men blokkene ordnes i motsatt rekkefølge (først den siste, deretter den første).

Standardverdi: nowrap.

Eksempel . Verdien wrap

Nå får ikke blokkene plass i sin container og vil ordnes 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 . Verdien wrap-reverse

Og nå endres rekkefølgen til omvendt (se på tallene inne 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 . Verdien nowrap

Nå vil blokkene plasseres i enkeltlinjemodus (slik som standard). I dette tilfellet vil verdien for bredden width for blokkene bli ignorert, hvis den forhindrer blokkene fra å passe i forelderen. Legg merke til at blokkene fikk plass i forelderen, men deres faktiske bredde er ikke 100px, som er satt for dem, 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 . Verdien nowrap

Men hvis blokkene får plass med den angitte bredden, vil ikke egenskapen width bli ignorert. La oss redusere antall blokker så alle får plass:

<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å

egenskapen flex-direction,
som angir retningen på flex-blokkenes akser
egenskapen justify-content,
som angir justering langs hovedaksen
egenskapen align-items,
som angir justering langs kryssaksen
egenskapen flex-flow,
sammensetting for flex-direction og flex-wrap
egenskapen order,
som angir rekkefølgen til flex-blokker
egenskapen align-self,
som angir justering av en enkelt blokk
egenskapen flex-basis,
som angir størrelsen på en spesifikk flex-blokk
egenskapen flex-grow,
som angir flex-blokkenes "grådighet"
egenskapen flex-shrink,
som angir flex-blokkenes krympbarhet
egenskapen flex,
sammensetting for flex-grow, flex-shrink og flex-basis