Proprietatea flex-wrap

Proprietatea flex-wrap stabilește aranjarea multiliniară a blocurilor pe axa principală. Se aplică elementului părinte pentru blocurile flex. Face parte din proprietatea abreviere flex-flow.

Sintaxă

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

Valori

Valoare	Descriere
`nowrap`	Modul single-line - blocurile sunt aranjate într-un singur rând.
`wrap`	Blocurile sunt aranjate pe mai multe rânduri, dacă nu încap pe unul singur.
`wrap-reverse`	La fel ca `wrap`, dar blocurile sunt aranjate în ordine inversă (întâi ultimul, apoi primul).

Valoarea implicită: nowrap.

Exemplu . Valoarea wrap

Acum blocurile nu încap în containerul lor și se vor aranja pe mai multe rânduri:

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

Exemplu . Valoarea wrap-reverse

Iar acum ordinea de succesiune se va schimba în ordine inversă (uitați-vă la cifrele din interiorul blocurilor):

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

Exemplu . Valoarea nowrap

Acum blocurile se vor aranja în modul single-line (așa este implicit). În acest caz, valoarea lățimii width pentru blocuri va fi ignorată, dacă le împiedică să încapă în părinte. Atenție la faptul că blocurile încap în părinte, dar lățimea lor reală nu este 100px, așa cum este setată, ci mai mică:

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

Exemplu . Valoarea nowrap

Cu toate acestea, dacă blocurile încap la lățimea lor setată - atunci proprietatea width nu va fi ignorată. Să reducem numărul de blocuri astfel încât toate să încapă:

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

Vezi și

proprietatea flex-direction,
care stabilește direcția axelor blocurilor flex
proprietatea justify-content,
care stabilește alinierea pe axa principală
proprietatea align-items,
care stabilește alinierea pe axa transversală
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea blocurilor flex
proprietatea align-self,
care stabilește alinierea unui singur bloc
proprietatea flex-basis,
care stabilește dimensiunea unui anumit bloc flex
proprietatea flex-grow,
care stabilește „lăcomia” blocurilor flex
proprietatea flex-shrink,
care stabilește compresibilitatea blocurilor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis