Proprietatea align-self

Proprietatea align-self stabilește alinierea de-a lungul axei transversale pentru un bloc flex individual și de-a lungul axei verticale pentru un element individual într-un grid. În esență, această proprietate reprezintă proprietatea align-items, dar pentru un bloc specific.

Sintaxă

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

Valori

Valoare	Descriere
`flex-start`	Blocul este lipit de începutul axei transversale.
`flex-end`	Blocul este lipit de sfârșitul axei transversale.
`center`	Blocul este centrat pe axa transversală.
`baseline`	Blocul este aliniat în funcție de linia sa de bază. Linia de bază este o linie imaginară, care trece de-a lungul marginii inferioare a simbolurilor fără a ține cont de lăstarii, de exemplu, ca la literele `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blocul este întins, ocupând tot spațiul disponibil pe axa transversală, însă totuși sunt luate în considerare `min-width` și `max-width`, dacă sunt setate. Dacă este setată lățimea și înălțimea pentru element - `stretch` va fi ignorat.
`auto`	Blocul va fi aliniat așa cum este stabilit în proprietatea `align-items`.

Valoarea implicită: auto.

Exemplu . Valoarea stretch

În acest exemplu, tuturor blocurilor le este atribuită valoarea flex-start (proprietatea align-items), iar celui de-al treilea bloc - align-self cu valoarea stretch:

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

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

Exemplu . Valoarea flex-end

În acest exemplu, pentru toate blocurile, pentru proprietatea align-items este stabilită valoarea flex-start, iar celui de-al treilea bloc - align-self cu valoarea flex-end:

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

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

Exemplu . Alinierea la începutul axei verticale în grid

Să stabilim alinierea pentru primul element la începutul axei verticale:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

Exemplu . Alinierea la centrul axei verticale în grid

Să stabilim alinierea primului element la centrul axei verticale:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

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

Să stabilim alinierea pentru primul nostru element în grid la sfârșitul axei verticale:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: end;
}

Vezi și

proprietatea flex-direction,
care stabilește direcția axelor blocurilor flex
proprietatea justify-content,
care stabilește alinierea de-a lungul axei principale
proprietatea align-items,
care stabilește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care stabilește multi-linia blocurilor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea blocurilor flex
proprietatea flex-basis,
care stabilește dimensiunea unui bloc flex specific
proprietatea flex-grow,
care stabilește „lăcomia” blocurilor flex
proprietatea flex-shrink,
care stabilește compresibilitatea blocurilor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis