Уласцівасць align-self

Уласцівасць align-self задае выраўноўванне ўздоўж папярочнай восі для асобна ўзятага flex-блока і па вертыкальнай восі для асобнага элемента ў грідзе. Па суці гэтая ўласцівасць уяўляе сабой уласцівасць align-items, але для канкрэтнага блока.

Сінтаксіс

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

Значэнні

Значэнне	Апісанне
`flex-start`	Блок прыціснуты да пачатку папярочнай восі.
`flex-end`	Блок прыціснуты да канца папярочнай восі.
`center`	Блок стаіць па цэнтры папярочнай восі.
`baseline`	Блок выраўноўваецца па сваёй базавай лініі. Базавая лінія (англ. baseline, або лінія шрыфту) - гэта ўяўная лінія, якая праходзіць па ніжнім краі сімвалаў без уліку звісанняў, напрыклад, як у літар `'ц'`, `'д'`, `'р'`, `'щ'`.
`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