Align-self xususiyati

align-self xususiyati alohida olingan flex-blok uchun o'qiga nisbatan joylashuvni va grid tizimidagi alohida element uchun vertikal o'q bo‘yicha joylashuvni belgilaydi. Aslida, bu xususiyat align-items xususiyatining alohida blok uchun ko‘rinishidir.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`flex-start`	Blok o'q boshiga joylashadi.
`flex-end`	Blok o'q oxiriga joylashadi.
`center`	Blok o'q markaziga joylashadi.
`baseline`	Blok o'z asosiy chizig‘i bo‘yicha joylashadi. Asosiy chiziq - bu belgilarning pastki qirrasidan o‘tadigan va osilgan qismlar hisobga olinmagan xayoliy chiziq, masalan, `'p'`, `'q'`, `'y'`, `'g'` harflarida bo‘lgani kabi.
`stretch`	Blok cho‘zilib, o'q bo‘yicha barcha mavjud joyni egallaydi, lekin `min-width` va `max-width` belgilangan bo‘lsa, ular hisobga olinadi. Agar element uchun kenglik va balandlik belgilangan bo‘lsa - `stretch` e‘tiborga olinmaydi.
`auto`	Blok `align-items` xususiyatida belgilanganidek joylashadi.

Standart qiymat: auto.

Misol . Stretch qiymati

Ushbu misolda barcha bloklar uchun flex-start qiymati belgilangan (align-items xususiyati), uchinchi blok uchun esa align-self stretch qiymatida:

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

Misol . Flex-end qiymati

Ushbu misolda barcha bloklar uchun align-items xususiyati flex-start qiymatida, uchinchi blok uchun esa align-self flex-end qiymatida:

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

Misol . Grid tizimida vertikal o‘q boshiga joylash

Keling, birinchi element uchun vertikal o‘q boshiga joylashuvni o‘rnatamiz:

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

Misol . Grid tizimida vertikal o‘q markaziga joylash

Keling, birinchi element uchun vertikal o‘q markaziga joylashuvni o‘rnatamiz:

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

Misol . Grid tizimida vertikal o‘q oxiriga joylash

Keling, grid tizimidagi birinchi element uchun vertikal o‘q oxiriga joylashuvni o‘rnatamiz:

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

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklar o‘qlarining yo‘nalishini belgilaydi
justify-content xususiyati,
bu asosiy o‘q bo‘yicha joylashuvni belgilaydi
align-items xususiyati,
bu o'qiga nisbatan joylashuvni belgilaydi
flex-wrap xususiyati,
bu flex bloklarning ko‘p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
bu flex bloklarning tartibini belgilaydi
flex-basis xususiyati,
bu alohida flex blokning o‘lchamini belgilaydi
flex-grow xususiyati,
bu flex bloklarning "ochko‘zligini" belgilaydi
flex-shrink xususiyati,
bu flex bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma