Align-items xususiyati

align-items xususiyati elementlarni ko'ndalang o'q bo'yicha flex bloklar uchun va vertikal o'q bo'yicha gridlar uchun joylashtirishni belgilaydi. Ota elementga qo'llaniladi.

Sintaksis

selektor {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Qiymatlar

Qiymat	Tavsif
`flex-start`	Bloklar ko'ndalang (vertikal) o'qning boshiga joylashadi.
`flex-end`	Bloklar ko'ndalang (vertikal) o'qning oxiriga joylashadi.
`center`	Bloklar ko'ndalang (vertikal) o'qning markazida joylashadi.
`baseline`	Elementlar o'zlarining asosiy chizig'i bo'yicha joylashadi. Asosiy chiziq - bu osilgan qismlar hisobga olinmasdan, belgilarning pastki qirrasi bo'ylab o'tadigan xayoliy chiziq, masalan, `'p'` va `'y'` harflarida bo'lgani kabi.
`stretch`	Bloklar ko'ndalang o'q bo'yicha barcha mavjud joyni egallab, cho'ziladi, shu bilan birga agar belgilangan bo'lsa, `min-width` va `max-width` hisobga olinadi. Agar elementlar uchun kenglik va balandlik belgilangan bo'lsa - `stretch` e'tiborga olinmaydi.

Standart qiymat: stretch.

Misol . Stretch qiymati

Hozir asosiy o'q chapdan o'ngga yo'nalgan, ko'ndalang o'q bo'yicha esa elementlar butun balandlikka cho'zilgan:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Misol . Stretch qiymati + element o'lchamlari

Hozir elementlar uchun kenglik va balandlik belgilangan, shuning uchun align-items xususiyati uchun stretch qiymati e'tiborga olinmaydi:

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

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

Misol . Flex-start qiymati elementsiz o'lchamlari

Hozir elementlar yuqoriga joylashadi:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Misol . Flex-start qiymati + element o'lchamlari

Hozir elementlar hanuz yuqoriga joylashadi, ammo ularning belgilangan kengligi va balandligi bo'ladi:

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

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

Misol . Flex-end qiymati + element o'lchamlari

Hozir elementlar pastga joylashadi:

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

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

Misol . Center qiymati + element o'lchamlari

Hozir elementlar ko'ndalang o'q (bu holda vertikal) bo'yicha markazda joylashadi:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Center qiymati, har xil o'lchamdagi elementlar

Hozir elementlar balandlik bo'yicha har xil o'lchamga ega (hozirda ular matn bilan kengaytirilmoqda, lekin height ni ham belgilash mumkin), kenglik hammada bir xil, chunki width xususiyati belgilangan:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Misol . Baseline qiymati, har xil o'lchamdagi elementlar

Asosiy chiziq bo'yicha joylashtirish shunday ko'rinadi:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Misol . Gridda vertikal o'q boshiga joylashtirish

Keling, elementlarimizni kataklar ichida vertikal o'q boshiga joylashtiramiz:

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

Endi gridimizni brauzer debuggerida ko'rib chiqaylik:

Misol . Gridda vertikal o'q markaziga joylashtirish

Endi elementlarimizni kataklar ichida vertikal o'q markaziga joylashtiramiz:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

Keling, gridning debuggerda ko'rinishini ko'rib chiqaylik:

Misol . Gridda vertikal o'q oxiriga joylashtirish

Elementlarning joylashishini yana o'zgartiramiz, bu safar vertikal o'qning oxiriga:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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 {
	
}

Endi gridimizning debugger orqali ko'rinishini ko'rib chiqaylik:

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklar o'qlarining yo'nalishini belgilaydi
justify-content xususiyati,
bu asosiy o'q bo'yicha joylashtirishni belgilaydi
align-items xususiyati,
bu ko'ndalang o'q bo'yicha joylashtirishni 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
align-self xususiyati,
bu bitta blokning joylashishini belgilaydi
flex-basis xususiyati,
bu ma'lum bir 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