Proprietà flex-direction

La proprietà flex-direction imposta la direzione dell'asse principale e trasversale o, in altre parole, dispone gli elementi in riga o in colonna.

Si applica all'elemento genitore per i flex container. È inclusa nella proprietà shorthand flex-flow.

Sintassi

selettore {
	flex-direction: row | row-reverse | column | column-reverse;
}

Valore	Descrizione
`row`	L'asse principale è diretto da sinistra a destra. Gli elementi sono disposti in riga, per default allineati al bordo sinistro, la loro numerazione ha un ordine normale - da sinistra a destra.
`row-reverse`	L'asse principale è diretto da destra a sinistra. Gli elementi sono disposti in riga, per default allineati al bordo destro, la loro numerazione ha un ordine inverso - da destra a sinistra.
`column`	L'asse principale è diretto dall'alto verso il basso. Gli elementi sono disposti in colonna, per default allineati in alto, la loro numerazione ha un ordine normale - dall'alto verso il basso.
`column-reverse`	L'asse principale è diretto dal basso verso l'alto. Gli elementi sono disposti in colonna, per default allineati in basso, la loro numerazione ha un ordine inverso - dal basso verso l'alto.

Valore di default: row.

Gli elementi sono disposti in riga, per default allineati al bordo sinistro, la loro numerazione ha un ordine normale - da sinistra a destra:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Gli elementi sono disposti in riga, per default allineati al bordo destro, la loro numerazione ha un ordine inverso - da destra a sinistra:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Gli elementi sono disposti in colonna, per default allineati in alto, la loro numerazione ha un ordine normale - dall'alto verso il basso:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Gli elementi sono disposti in colonna, per default allineati in basso, la loro numerazione ha un ordine inverso - dal basso verso l'alto:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

la proprietà justify-content,
che definisce l'allineamento lungo l'asse principale
la proprietà align-items,
che definisce l'allineamento lungo l'asse trasversale
la proprietà flex-wrap,
che definisce la multi-linea dei flex container
la proprietà flex-flow,
shorthand per flex-direction e flex-wrap
la proprietà order,
che definisce l'ordine dei flex item
la proprietà align-self,
che definisce l'allineamento di un singolo elemento
la proprietà flex-basis,
che definisce la dimensione di un specifico flex item
la proprietà flex-grow,
che definisce la capacità di crescita dei flex item
la proprietà flex-shrink,
che definisce la capacità di restringimento dei flex item
la proprietà flex,
shorthand per flex-grow, flex-shrink e flex-basis