Align-content xususiyati

align-content xususiyati elementlarni flex bloklar uchun ko'ndalang o'q bo'yicha, gridlar uchun esa vertikal o'q bo'yicha joylashtiradi. Ota elementga qo'llaniladi.

Sintaksis

selector {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Qiymatlar

Qiymat	Ta'rif
`flex-start`	Bloklar ko'ndalang (vertikal) o'qning boshiga joylashgan.
`flex-end`	Bloklar ko'ndalang (vertikal) o'qning oxiriga joylashgan.
`center`	Bloklar ko'ndalang (vertikal) o'qning markazida joylashgan.
`space-between`	Bloklar ko'ndalang (vertikal) o'q bo'yicha taqsimlangan, bunda birinchi element o'qning boshiga, oxirgisi esa o'qning oxiriga joylashgan.
`space-around`	Bloklar ko'ndalang (vertikal) o'q bo'yicha taqsimlangan, bunda birinchi blok va o'qning boshlanishi o'rtasida, oxirgi blok va o'qning oxiri o'rtasida boshqa bloklar orasidagi bilan bir xil interval mavjud. Biroq, ular ko'rinadigandek teng emas: intervaller qo'shiladi va ikkita blok orasidagi masofa blok va o'qning boshi/oxiri orasidagidan ikki baravar katta.

Misol . Flex-start qiymati

Ushbu mislda, joylashtirish amalga oshirilayotgan o'q yuqoridan pastga qarab yo'nalgan, ya'ni u ko'ndalang o'q hisoblanadi. Olingan natijadan ko'rinib turibdiki, bizning barcha elementlarimiz uning yuqori qismiga joylashgan:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Flex-end qiymati

Ushbu mislda bloklar ko'ndalang o'qning pastki qismiga joylashgan, chunki align-content xususiyati flex-end qiymatida belgilangan:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Misol . Center qiymati

Hozir bloklar ko'ndalang o'qning markaziga joylashgan:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Gridda vertikal o'qning boshiga joylashtirish

Keling, griddagi elementlarimizni vertikal o'qning boshiga joylashtirishni o'rnatamiz:

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

#parent {
	display: grid;
	align-content: 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;
}

Gridda vertikal o'qning markaziga joylashtirish

Endi esa keling, elementlarni vertikal o'qning markaziga joylashtirishni o'rnatamiz:

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

#parent {
	display: grid;
	align-content: 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;
}

Gridda vertikal o'qning oxiriga joylashtirish

Keling, elementlarni vertikal o'qning oxiriga joylashtirishni o'rnatamiz:

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

#parent {
	display: grid;
	align-content: 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;
}

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklarning o'qlar 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 qatorligini 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
place-content xususiyati,
bu asosiy va ko'ndalang o'qlar bo'yicha joylashtirishni belgilaydi