Align-content xassəsi

align-content xassəsi elementləri flex bloklar üçün en oxu boyunca, qridlər üçün isə şaquli ox üzrə düzləndirir. Valideyn elementə tətbiq edilir.

Sintaksis

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

Dəyərlər

Dəyər	Açıqlama
`flex-start`	Bloklar en (şaquli) oxun başlanğıcına sıxılır.
`flex-end`	Bloklar en (şaquli) oxun sonuna sıxılır.
`center`	Bloklar en (şaquli) oxun mərkəzində yerləşir.
`space-between`	Bloklar en (şaquli) ox boyunca paylanır, ilk element oxun başlanğıcına, sonuncu element isə oxun sonuna sıxılır.
`space-around`	Bloklar en (şaquli) ox boyunca paylanır, ilk blokla oxun başlanğıcı arasında, sonuncu blokla oxun sonu arasında qalan bloklar arasındakı kimi eyni boşluq olur. Lakin, göründüyü kimi onlar bərabər deyil: boşluqlar toplanır və iki blok arasında məsafə blokla oxun başlanğıcı/sonu arasındakı məsafədən iki dəfə çoxdur.

Nümunə . Flex-start dəyəri

Bu nümunədə düzləndirmənin aparıldığı ox yuxarıdan aşağıya doğru yönəlib, yəni en oxudur. Alınan nəticədən göründüyü kimi, bütün elementlərimiz onun yuxarı hissəsinə sıxılıb:

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

Nümunə . Flex-end dəyəri

Bu nümunədə bloklar en oxun aşağı tərəfinə sıxılıb, çünki align-content xassəsi flex-end dəyərində təyin edilib:

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

Nümunə . Center dəyəri

Hal-hazırda bloklar en oxun mərkəzinə görə düzləndirilib:

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

Qriddə şaquli oxun başlanğıcına görə düzləndirmə

Gəlin qriddə elementlərimiz üçün düzləndirməni şaquli oxun başlanğıcına görə təyin edək:

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

Qriddə şaquli oxun mərkəzinə görə düzləndirmə

İndi isə gəlin elementlərin düzləndirilməsini şaquli oxun mərkəzinə görə təyin edək:

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

Qriddə şaquli oxun sonuna görə düzləndirmə

Gəlin elementlərin düzləndirilməsini şaquli oxun sonuna görə təyin edək:

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

Həmçinin bax

flex-direction xassəsi,
o, flex blokların oxlarının istiqamətini təyin edir
justify-content xassəsi,
o, əsas ox üzrə düzləndirməni təyin edir
align-items xassəsi,
o, en ox üzrə düzləndirməni təyin edir
flex-wrap xassəsi,
o, flex blokların çoxsətirliliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaltma
order xassəsi,
o, flex blokların sırasını təyin edir
align-self xassəsi,
o, bir blokun düzləndirilməsini təyin edir
place-content xassəsi,
o, əsas və en oxlar üzrə düzləndirməni təyin edir