Хосияти align-items

Хосияти align-items дар рост кардани элементҳо дар баробари меҳвари амудӣ барои блокҳои flex ва дар баробари меҳвари амудӣ барои gridҳо муайян мекунад. Ба элементи волидайн татбиқ карда мешавад.

Синтаксис

селектор {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Қимматҳо

Қиммат	Тавсиф
`flex-start`	Блокҳо ба ибтидои меҳвари амудӣ (вертикалӣ) фишор карда мешаванд.
`flex-end`	Блокҳо ба поёни меҳвари амудӣ (вертикалӣ) фишор карда мешаванд.
`center`	Блокҳо дар маркази меҳвари амудӣ (вертикалӣ) меистанд.
`baseline`	Элементҳо дар баробари хати асосии худ дар рост карда мешаванд. Хатаи асосӣ хати хаёлӣ аст, ки аз канори поёни рамзҳо гузашта, ба ғайр аз овезонҳо, ба монанди рамзҳои `'p'` ва `'y'`.
`stretch`	Блокҳо дароз карда мешаванд, ҳамаи фазои дастрас дар баробари меҳвари амудиро ишғол мекунанд, аммо ҳамчунин `min-width` ва `max-width` ҳисоб карда мешаванд, агар онҳо муайян карда шаванд. Агар барои элементҳо паҳнӣ ва баландӣ муайян карда шуда бошад - `stretch` нодида гирифта мешавад.

Қиммати пешфарз: stretch.

Намуна . Қиммати stretch

Акнун меҳвари асосӣ аз чап ба рост равона шудааст, ва дар баробари меҳвари амудӣ элементҳо дароз карда шуда, ба тамоми баландӣ:

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

Намуна . Қиммати stretch + андозаи элемент

Акнун барои элементҳо паҳнӣ ва баландӣ муайян карда шудааст, барои ҳамин қиммати stretch барои хосияти align-items нодида гирифта мешавад:

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

Намуна . Қиммати flex-start бе андозаи элемент

Акнун элементҳо ба боло фишор карда мешаванд:

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

Намуна . Қиммати flex-start + андозаи элемент

Акнун элементҳо ҳамчунон ба боло фишор карда мешаванд, аммо барояшон паҳнӣ ва баландии муайяншуда вуҷуд дорад:

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

Намуна . Қиммати flex-end + андозаи элемент

Акнун элементҳо ба поён фишор карда мешаванд:

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

Намуна . Қиммати center + андозаи элемент

Акнун элементҳо дар марказ дар баробари меҳвари амудӣ (дар ин ҳолат амудӣ) меистанд:

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

Намуна . Қиммати center, элементҳои андозаҳои гуногун

Акнун элементҳо андозаҳои гуногун аз рӯи баландӣ доранд (акнун онҳо бо матн паҳн мешаванд, аммо метавон height-ро ҳам муайян кард), паҳнӣ барои ҳама якхела аст, зеро хосияти width муайян карда шудааст:

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

Намуна . Қиммати baseline, элементҳои андозаҳои гуногун

Ва дар рост кардани дар баробари хати асосӣ ин тавр намудор аст:

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

Намуна . Дар рост кардан ба ибтидои меҳвари амудӣ дар grid

Биёед элементҳои худро дар дохили ҳуҷраҳо дар баробари ибтидои меҳвари амудӣ дар рост кунем:

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

Ва акнун ба grid-и худ дар тафтишкунаки браузер назар кунем:

Намуна . Дар рост кардан дар маркази меҳвари амудӣ дар grid

Ва акнун элементҳои худро дар ҳуҷраҳо дар маркази меҳвари амудӣ дар рост кунем:

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

Биёед ба намоиши grid дар тафтишкунак назар кунем:

Намуна . Дар рост кардан ба поёни меҳвари амудӣ дар grid

Бори дигар дар рост кардани элементҳоро тағир диҳем, ин дафъа ба поёни меҳвари амудӣ:

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

Ва акнун ба намудори grid-и худ аз тариқи тафтишкунак назар кунем:

Инчунин бубинед

хосияти flex-direction,
ки самти меҳварҳои блокҳои flex-ро муайян мекунад
хосияти justify-content,
ки дар рост кардан дар баробари меҳвари асосиро муайян мекунад
хосияти align-items,
ки дар рост кардан дар баробари меҳвари амудиро муайян мекунад
хосияти flex-wrap,
ки серсатрии блокҳои flex-ро муайян мекунад
хосияти flex-flow,
ихтисор барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои flex-ро муайян мекунад
хосияти align-self,
ки дар рост кардани як блокро муайян мекунад
хосияти flex-basis,
ки андозаи блоки мушаххаси flex-ро муайян мекунад
хосияти flex-grow,
ки ҳарисӣ будани блокҳои flex-ро муайян мекунад
хосияти flex-shrink,
ки фишорпазирии блокҳои flex-ро муайян мекунад
хосияти flex,
ихтисор барои flex-grow, flex-shrink ва flex-basis