Savybė flex-wrap

Savybė flex-wrap nustato daugiaeilę blokų išdėstymą pagal pagrindinę ašį. Taikoma tėviniam elementui, skirtam flex blokams. Įeina į trumpinio savybę flex-flow.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`nowrap`	Vienos eilutės režimas - blokai išsidėsto į vieną eilutę.
`wrap`	Blokai išsidėsto į kelias eilutes, jei netelpa į vieną.
`wrap-reverse`	Tas pats, kas ir `wrap`, bet blokai išsidėsto atvirkštine tvarka (pirmiausiai paskutinis, po to pirmasis).

Numatytoji reikšmė: nowrap.

Pavyzdys . Reikšmė wrap

Dabar blokai netelpa į savo konteinerį ir išsidėstys keliorse eilutėse:

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

Pavyzdys . Reikšmė wrap-reverse

O dabar sekos tvarka pasikeis į atvirkštinę (žiūrėkite į skaičius blokuose):

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

Pavyzdys . Reikšmė nowrap

Dabar blokai bus išdėstyti vienos eilutės režimu (taip yra pagal nutylėjimą). Tuo pačiu reikšmė pločio width blokams bus ignoruota, jei ji trukdo blokams tilpti į tėvą. Atkreipkite dėmesį, kad blokai sutelpa į tėvą, bet jų tikrasis plotis nėra 100px, kaip jiems nustatyta, o mažesnis:

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

Pavyzdys . Reikšmė nowrap

Tačiau, jei blokai telpa su jiems nustatytu plotis - tada savybė width nebus ignoruota. Sumažinkime blokų skaičių kad jie visi tilptų:

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

Taip pat žiūrėkite

savybė flex-direction,
kuri nustato flex blokų ašių kryptį
savybė justify-content,
kuri nustato lygiavimą pagal pagrindinę ašį
savybė align-items,
kuri nustato lygiavimą pagal skersinę ašį
savybė flex-flow,
trumpinys flex-direction ir flex-wrap
savybė order,
kuri nustato flex blokų tvarką
savybė align-self,
kuri nustato vieno bloko lygiavimą
savybė flex-basis,
kuri nustato konkretaus flex bloko dydį
savybė flex-grow,
kuri nustato flex blokų godumą
savybė flex-shrink,
kuri nustato flex blokų susispaudimą
savybė flex,
trumpinys flex-grow, flex-shrink ir flex-basis