Īpašība flex-wrap

Īpašība flex-wrap nosaka daudzlīniju bloku izvietošanu pa galveno asi. Attiecas uz vecāka elementu flex blokiem. Ietilpst īpašības saīsinājumā flex-flow.

Sintakse

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

Vērtības

Vērtība	Apraksts
`nowrap`	Vienas līnijas režīms - bloki tiek izvietoti vienā rindā.
`wrap`	Bloki tiek izvietoti vairākās rindās, ja neietilpst vienā.
`wrap-reverse`	Tas pats, kas `wrap`, bet bloki tiek izvietoti citā secībā (vispirms pēdējais, tad pirmais).

Noklusējuma vērtība: nowrap.

Piemērs . Vērtība wrap

Šobrīd bloki neietilpst savā konteinerā un tiks izvietoti vairākās rindās:

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

Piemērs . Vērtība wrap-reverse

Un tagad secība mainīsies uz apgriezto (skatieties uz cipariem bloku iekšienē):

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

Piemērs . Vērtība nowrap

Šobrīd bloki tiks izvietoti vienas līnijas režīmā (tā pēc noklusējuma). Šajā gadījumā vērtība platuma width blokiem tiks ignorēta, ja tā traucē blokiem ietilpt vecākā. Pievērsiet uzmanību tam, ka bloki ietilpa vecākā, bet to reālais platums nav 100px, kā tiem ir norādīts, bet mazāks:

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

Piemērs . Vērtība nowrap

Tomēr, ja bloki ietilpst ar tiem norādīto platumu - tad īpašība width netiks ignorēta. Samazināsim bloku daudzumu tā, lai tie visi ietilptu:

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

Skatiet arī

īpašība flex-direction,
kas nosaka flex bloku asu virzienu
īpašība justify-content,
kas nosaka izlīdzināšanu pa galveno asi
īpašība align-items,
kas nosaka izlīdzināšanu pa šķērsasi
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas nosaka flex bloku secību
īpašība align-self,
kas nosaka viena bloka izlīdzināšanu
īpašība flex-basis,
kas nosaka konkrēta flex bloka izmēru
īpašība flex-grow,
kas nosaka flex bloku alkatību
īpašība flex-shrink,
kas nosaka flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis