Proprietatea align-items

Proprietatea align-items stabilește alinierea elementelor de-a lungul axei transversale pentru containerele flex și pe axa verticală pentru grid-uri. Se aplică elementului părinte.

Sintaxă

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

Valori

Valoare	Descriere
`flex-start`	Blocurile sunt aliniate la începutul axei transversale (verticale).
`flex-end`	Blocurile sunt aliniate la sfârșitul axei transversale (verticale).
`center`	Blocurile sunt centrate pe axa transversală (verticală).
`baseline`	Elementele sunt aliniate după linia lor de bază. Linia de bază este o linie imaginară care trece de-a lungul marginii inferioare a caracterelor, fără a lua în considerare elementele care coboară sub linie, de exemplu, ca la literele `'p'` și `'y'`.
`stretch`	Blocurile sunt întinse, ocupând tot spațiul disponibil pe axa transversală, ținând totuși cont de `min-width` și `max-width`, dacă sunt definite. Dacă este definită lățimea și înălțimea pentru elemente - `stretch` va fi ignorat.

Valoarea implicită: stretch.

Exemplu . Valoarea stretch

Acum axa principală este orientată de la stânga la dreapta, iar pe axa transversală elementele sunt întinse pe toată înălțimea:

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

Exemplu . Valoarea stretch + dimensiunile elementului

Acum pentru elemente este definită lățimea și înălțimea, deci valoarea stretch pentru proprietatea align-items va fi ignorată:

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

Exemplu . Valoarea flex-start fără dimensiuni definite pentru element

Acum elementele vor fi aliniate în partea de sus:

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

Exemplu . Valoarea flex-start + dimensiuni definite pentru element

Acum elementele vor fi în continuare aliniate în partea de sus, dar vor avea lățimea și înălțimea definite:

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

Exemplu . Valoarea flex-end + dimensiuni definite pentru element

Acum elementele vor fi aliniate în partea de jos:

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

Exemplu . Valoarea center + dimensiuni definite pentru element

Acum elementele vor fi centrate pe axa transversală (în acest caz pe verticală):

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

Exemplu . Valoarea center, elemente de dimensiuni diferite

Acum elementele au dimensiuni diferite ca înălțime (acum ele sunt expandate de text, dar se poate defini și height), lățimea este aceeași pentru toate, deoarece este definită proprietatea 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;
}

Exemplu . Valoarea baseline, elemente de dimensiuni diferite

Iar așa arată alinierea după linia de bază:

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

Exemplu . Alinierea la începutul axei verticale în grid

Să aliniem elementele noastre din interiorul celulelor la începutul axei 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;
}

Și acum să ne uităm la grid-ul nostru în instrumentul de dezvoltare al browser-ului:

Exemplu . Alinierea pe centrul axei verticale în grid

Și acum să aliniem elementele noastre din celule pe centrul axei 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;
}

Să ne uităm la afișarea grid-ului în instrumentul de dezvoltare:

Exemplu . Alinierea la sfârșitul axei verticale în grid

Să modificăm din nou alinierea elementelor, de data aceasta la sfârșitul axei 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 {
	
}

Și acum să vedem cum arată grid-ul nostru prin instrumentul de dezvoltare:

Vezi și

proprietatea flex-direction,
care stabilește direcția axelor containerelor flex
proprietatea justify-content,
care stabilește alinierea pe axa principală
proprietatea align-items,
care stabilește alinierea pe axa transversală
proprietatea flex-wrap,
care stabilește capacitatea de a fi pe mai multe rânduri a containerelor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea elementelor flex
proprietatea align-self,
care stabilește alinierea unui singur element
proprietatea flex-basis,
care stabilește dimensiunea unui anumit element flex
proprietatea flex-grow,
care stabilește factorul de creștere al elementelor flex
proprietatea flex-shrink,
care stabilește factorul de comprimare al elementelor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis