Својството 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