Proprietà justify-content

La proprietà justify-content definisce l'allineamento degli elementi lungo l'asse principale per i blocchi flex e l'asse orizzontale per i grid. Si applica all'elemento genitore.

Sintassi

selettore {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Valori

Valore	Descrizione
`flex-start`	I blocchi sono allineati all'inizio dell'asse principale (orizzontale).
`flex-end`	I blocchi sono allineati alla fine dell'asse principale (orizzontale).
`center`	I blocchi sono centrati lungo l'asse principale (orizzontale).
`space-between`	I blocchi sono distribuiti lungo l'asse principale (orizzontale), con il primo elemento allineato all'inizio dell'asse, e l'ultimo alla fine.
`space-around`	I blocchi sono distribuiti lungo l'asse principale (orizzontale), con lo stesso spazio tra il primo blocco e l'inizio dell'asse, l'ultimo blocco e la fine dell'asse, e tra gli altri blocchi. Tuttavia, non sono uguali, come potrebbe sembrare: gli spazi si sommano e tra due blocchi la distanza è il doppio di quella tra un blocco e l'inizio/fine dell'asse.

Valore predefinito: flex-start.

Esempio . Valore flex-start

Ora l'asse è orientato da sinistra a destra (grazie a flex-direction: row), e i blocchi sono allineati al lato sinistro:

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

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

Esempio . Valore flex-end

In questo esempio l'asse è anch'esso orientato da sinistra a destra, ma i blocchi sono allineati al lato destro, poiché è impostato justify-content con il valore flex-end:

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

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

Esempio . Valore center

Ora i blocchi saranno centrati indipendentemente dalla direzione dell'asse principale:

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

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

Esempio . Valore space-between

I blocchi sono distribuiti lungo l'asse principale, con il primo elemento allineato all'inizio dell'asse, e l'ultimo alla fine:

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

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

Esempio . Valore space-around

I blocchi sono distribuiti lungo l'asse principale, con lo stesso spazio tra il primo blocco e l'inizio dell'asse, l'ultimo blocco e la fine dell'asse, e tra gli altri blocchi. Tuttavia, gli spazi si sommano e tra due blocchi la distanza è il doppio di quella tra un blocco e l'inizio/fine dell'asse:

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

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

Esempio . Valore center. Asse verso il basso

Cambiamo la direzione dell'asse principale, impostando flex-direction al valore column:

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

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

Esempio . Valore space-between. Asse verso il basso

Ora i blocchi saranno distribuiti uniformemente lungo la verticale:

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

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

Esempio . Allineamento all'inizio dell'asse orizzontale (righe) nel grid

Impostiamo l'allineamento per i nostri elementi all'inizio dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Esempio . Allineamento al centro dell'asse orizzontale nel grid

Ora impostiamo l'allineamento per i nostri elementi al centro dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Esempio . Allineamento alla fine dell'asse orizzontale nel grid

Impostiamo l'allineamento per i nostri elementi alla fine dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Vedi anche

la proprietà flex-direction,
che definisce la direzione degli assi dei blocchi flex
la proprietà align-items,
che definisce l'allineamento lungo l'asse trasversale
la proprietà flex-wrap,
che definisce la multilinea dei blocchi flex
la proprietà flex-flow,
scorciatoia per flex-direction e flex-wrap
la proprietà order,
che definisce l'ordine dei blocchi flex
la proprietà align-self,
che definisce l'allineamento di un singolo blocco
la proprietà flex-basis,
che definisce la dimensione di un specifico blocco flex
la proprietà flex-grow,
che definisce l'espansione dei blocchi flex
la proprietà flex-shrink,
che definisce la contrazione dei blocchi flex
la proprietà flex,
scorciatoia per flex-grow, flex-shrink e flex-basis