Својство align-self

Својство align-self задаје поравнање дуж попречне осе за појединачно узети flex-блок и по вертикалној оси за појединачни елемент у гриду. У суштини ово својство представља својство align-items, али за конкретни блок.

Синтакса

селектор {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Вредности

Вредност	Опис
`flex-start`	Блок је притиснут на почетак попречне осе.
`flex-end`	Блок је притиснут на крај попречне осе.
`center`	Блок је центриран по попречној оси.
`baseline`	Блок се поравнава по својој базној линији. Базна линија је замишљена линија, која пролази по доњем ивици симбола без обзира на надвишења, на пример, као код слова `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Блок је истегнут, заузимајући сву доступну површину по попречној оси, при томе се ипак узимају у обзир `min-width` и `max-width`, ако су задати. Ако је задата ширина и висина за елемент - `stretch` ће бити игнорисан.
`auto`	Блок ће бити поравнат онако како је задато у својству `align-items`.

Подразумевана вредност: auto.

Пример . Вредност stretch

У овом примеру свим блоковима је задата вредност flex-start (својство align-items), а трећем блоку - align-self у вредности 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;
}

Пример . Вредност flex-end

У овом примеру свим блоковима за својство align-items је задата вредност flex-start, а трећем блоку - align-self у вредности 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;
}

Пример . Поравнање по почетку вертикалне осе у гриду

Поставимо поравнање за први елемент по почетку вертикалне осе:

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

Пример . Поравнање по центру вертикалне осе у гриду

Поставимо поравнање првог елемента по центру вертикалне осе:

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

Пример . Поравнање по крају вертикалне осе у гриду

Поставимо поравнање за наш први елемент у гриду по крају вертикалне осе:

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

Погледајте такође

својство flex-direction,
које задаје правац оса flex блокова
својство justify-content,
које задаје поравнање по главној оси
својство align-items,
које задаје поравнање по попречној оси
својство flex-wrap,
које вишелинијскост flex блокова
својство flex-flow,
скраћеница за flex-direction и flex-wrap
својство order,
које задаје редослед flex блокова
својство flex-basis,
које задаје величину конкретног flex блока
својство flex-grow,
које задаје похлепност flex блокова
својство flex-shrink,
које задаје сабијање flex блокова
својство flex,
скраћеница за flex-grow, flex-shrink и flex-basis