Proprietà flex-wrap

La proprietà flex-wrap definisce la disposizione multilinea degli elementi lungo l'asse principale. Si applica all'elemento genitore contenente gli elementi flex. È inclusa nella proprietà abbreviata flex-flow.

Sintassi

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

Valori

Valore	Descrizione
`nowrap`	Modalità a linea singola - gli elementi si dispongono su una sola riga.
`wrap`	Gli elementi si dispongono su più righe, se non entrano in una sola.
`wrap-reverse`	Lo stesso di `wrap`, ma gli elementi si dispongono in ordine inverso (prima l'ultimo, poi il primo).

Valore predefinito: nowrap.

Esempio . Valore wrap

Ora gli elementi non entrano nel loro contenitore e si disporranno su più righe:

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

Esempio . Valore wrap-reverse

E ora l'ordine di disposizione cambierà in inverso (guardate i numeri dentro gli elementi):

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

Esempio . Valore nowrap

Ora gli elementi si disporranno in modalità a linea singola (così è per impostazione predefinita). In questo caso il valore della larghezza width per gli elementi verrà ignorato, se impedisce agli elementi di entrare nel genitore. Fate attenzione al fatto che gli elementi sono entrati nel genitore, ma la loro larghezza reale non è 100px, come impostato, ma minore:

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

Esempio . Valore nowrap

Tuttavia, se gli elementi entrano con la larghezza impostata - allora la proprietà width non verrà ignorata. Riduciamo il numero di elementi in modo che entrino tutti:

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

Vedi anche

proprietà flex-direction,
che definisce la direzione degli assi degli elementi flex
proprietà justify-content,
che definisce l'allineamento lungo l'asse principale
proprietà align-items,
che definisce l'allineamento lungo l'asse trasversale
proprietà flex-flow,
abbreviazione per flex-direction e flex-wrap
proprietà order,
che definisce l'ordine degli elementi flex
proprietà align-self,
che definisce l'allineamento di un singolo elemento
proprietà flex-basis,
che definisce la dimensione di un specifico elemento flex
proprietà flex-grow,
che definisce l'espansione degli elementi flex
proprietà flex-shrink,
che definisce la contrazione degli elementi flex
proprietà flex,
abbreviazione per flex-grow, flex-shrink e flex-basis