Proprietà align-items

La proprietà align-items definisce l'allineamento degli elementi lungo l'asse trasversale per i blocchi flex e lungo l'asse verticale per le griglie. Si applica all'elemento genitore.

Sintassi

selettore {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Valori

Valore	Descrizione
`flex-start`	I blocchi sono allineati all'inizio dell'asse trasversale (verticale).
`flex-end`	I blocchi sono allineati alla fine dell'asse trasversale (verticale).
`center`	I blocchi sono centrati lungo l'asse trasversale (verticale).
`baseline`	Gli elementi sono allineati in base alla loro linea di base. La linea di base è una linea immaginaria che passa lungo il bordo inferiore dei caratteri senza considerare i tratti discendenti, come per le lettere `'p'` e `'y'`.
`stretch`	I blocchi sono stirati per occupare tutto lo spazio disponibile lungo l'asse trasversale, tuttavia vengono comunque considerati `min-width` e `max-width`, se impostati. Se invece sono impostate larghezza e altezza per gli elementi - `stretch` verrà ignorato.

Valore predefinito: stretch.

Esempio . Valore stretch

Ora l'asse principale è orientato da sinistra a destra, e lungo l'asse trasversale gli elementi sono stirati su tutta l'altezza:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Esempio . Valore stretch + dimensioni elemento

Ora per gli elementi sono impostate larghezza e altezza, quindi il valore stretch per la proprietà align-items verrà ignorato:

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

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

Esempio . Valore flex-start senza dimensioni elemento

Ora gli elementi saranno allineati in alto:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Esempio . Valore flex-start + dimensioni elemento

Ora gli elementi continueranno ad essere allineati in alto, ma avranno larghezza e altezza impostate:

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

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

Esempio . Valore flex-end + dimensioni elemento

Ora gli elementi saranno allineati in basso:

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

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

Esempio . Valore center + dimensioni elemento

Ora gli elementi saranno centrati lungo l'asse trasversale (in questo caso verticalmente):

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

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

Esempio . Valore center, elementi di dimensioni diverse

Ora gli elementi hanno dimensioni diverse in altezza (al momento si espandono per il testo, ma si potrebbe impostare anche height), la larghezza è uguale per tutti, poiché è impostata la proprietà width:

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

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

Esempio . Valore baseline, elementi di dimensioni diverse

Ecco come appare l'allineamento per la linea di base:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Esempio . Allineamento all'inizio dell'asse verticale nella griglia

Allineiamo i nostri elementi all'interno delle celle in alto rispetto all'asse verticale:

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

E ora diamo un'occhiata alla nostra griglia nel debugger del browser:

Esempio . Allineamento al centro dell'asse verticale nella griglia

E ora allineiamo i nostri elementi nelle celle al centro dell'asse verticale:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

Diamo un'occhiata alla visualizzazione della griglia nel debugger:

Esempio . Allineamento alla fine dell'asse verticale nella griglia

Cambiamo nuovamente l'allineamento degli elementi, questa volta in basso rispetto all'asse verticale:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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;
}
#elem1 {
	
}

E ora vediamo come appare la nostra griglia attraverso il debugger:

Vedi anche

proprietà flex-direction,
che definisce la direzione degli assi dei blocchi 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-wrap,
che definisce l'andamento a capo dei blocchi flex
proprietà flex-flow,
scorciatoia per flex-direction e flex-wrap
proprietà order,
che definisce l'ordine dei blocchi flex
proprietà align-self,
che definisce l'allineamento di un singolo blocco
proprietà flex-basis,
che definisce la dimensione di un specifico blocco flex
proprietà flex-grow,
che definisce la capacità di crescita dei blocchi flex
proprietà flex-shrink,
che definisce la capacità di contrazione dei blocchi flex
proprietà flex,
scorciatoia per flex-grow, flex-shrink e flex-basis