Align-items xassəsi

align-items xassəsi flex bloklar üçün elementlərin eninə ox üzrə, qridlər üçün isə şaquli ox üzrə düzülməsini təyin edir. Valideyn elementə şamil edilir.

Sintaksis

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

Dəyərlər

Dəyər	Təsvir
`flex-start`	Bloklar eninə (şaquli) oxun başlanğıcına sıxılır.
`flex-end`	Bloklar eninə (şaquli) oxun sonuna sıxılır.
`center`	Bloklar eninə (şaquli) oxun mərkəzində yerləşir.
`baseline`	Elementlər öz əsas xətti üzrə düzülür. Əsas xətt - bu, səslərin aşağı hissəsindən keçən xəyali xəttdir, məsələn, `'p'` və `'y'` hərflərində olduğu kimi.
`stretch`	Bloklar eninə ox boyunca bütün mövcud yeri tutaraq uzanır, lakin `min-width` və `max-width` təyin edilibsə, onlar nəzərə alınır. Əgər elementlər üçün en və hündürlük təyin edilibsə - `stretch` laqğa qalınacaq.

Susmaya görə dəyər: stretch.

Nümunə . Stretch dəyəri

Hal-hazırda əsas ox soldan sağa yönəlib, eninə ox boyunca isə elementlər bütün hündürlük boyunca uzanır:

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

Nümunə . Stretch dəyəri + elementin ölçüləri

Hal-hazırda elementlər üçün en və hündürlük təyin edilib, ona görə də align-items xassəsi üçün stretch dəyəri laqğa qalınacaq:

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

Nümunə . Flex-start dəyəri ölçüsüz element

Hal-hazırda elementlər yuxarıya sıxılacaq:

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

Nümunə . Flex-start dəyəri + elementin ölçüləri

Hal-hazırda elementlər hələ də yuxarıya sıxılacaq, lakin onların təyin edilmiş eni və hündürlüyü olacaq:

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

Nümunə . Flex-end dəyəri + elementin ölçüləri

Hal-hazırda elementlər aşağıya sıxılacaq:

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

Nümunə . Center dəyəri + elementin ölçüləri

Hal-hazırda elementlər eninə ox (bu halda şaquli) üzrə mərkəzdə yerləşəcək:

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

Nümunə . Center dəyəri, müxtəlif ölçülü elementlər

Hal-hazırda elementlər hündürlük baxımından müxtəlif ölçülərə malikdir (hal-hazırda onlar mətnlə ayrılır, lakin height də təyin etmək olar), width xassəsi təyin edildiyi üçün eni hamısında eynidir:

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

Nümunə . Baseline dəyəri, müxtəlif ölçülü elementlər

Əsas xətt üzrə düzülmə isə belə görünür:

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

Nümunə . Qriddə şaquli oxun başlanğıcı üzrə düzülmə

Gəlin elementlərimizi xanaların daxilində şaquli oxun başlanğıcı üzrə düzək:

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

İndi isə qridimizə brauzerin debug qurğusunda baxaq:

Nümunə . Qriddə şaquli oxun mərkəzi üzrə düzülmə

İndi isə elementlərimizi xanalarda şaquli oxun mərkəzi üzrə düzək:

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

Gəlin qridin debug qurğusunda görünüşünə baxaq:

Nümunə . Qriddə şaquli oxun sonu üzrə düzülmə

Elementlərin düzülməsini bir daha dəyişək, bu dəfə şaquli oxun sonu üzrə:

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

İndi isə qridimizin debug qurğusu vasitəsilə görünüşünə baxaq:

Həmçinin bax

flex-direction xassəsi,
bu, flex blokların oxlarının istiqamətini təyin edir
justify-content xassəsi,
bu, əsas ox üzrə düzülməni təyin edir
align-items xassəsi,
bu, eninə ox üzrə düzülməni təyin edir
flex-wrap xassəsi,
bu, flex blokların çoxsətirliliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaltma
order xassəsi,
bu, flex blokların sırasını təyin edir
align-self xassəsi,
bu, bir blokun düzülməsini təyin edir
flex-basis xassəsi,
bu, konkret flex blokunun ölçüsünü təyin edir
flex-grow xassəsi,
bu, flex blokların acgözlüyünü təyin edir
flex-shrink xassəsi,
bu, flex blokların sıxıla bilməsini təyin edir
flex xassəsi,
flex-grow, flex-shrink və flex-basis üçün qısaltma