Хосияти align-content

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

Синтаксис

селектор {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Қиматҳо

Қимат	Тавсиф
`flex-start`	Блокҳо ба оғози меҳвари амудӣ (верткалӣ) фишурда шудаанд.
`flex-end`	Блокҳо ба поёни меҳвари амудӣ (верткалӣ) фишурда шудаанд.
`center`	Блокҳо дар маркази меҳвари амудӣ (верткалӣ) қарор доранд.
`space-between`	Блокҳо дар тири меҳвари амудӣ (верткалӣ) тақсим шудаанд, дар ҳоле ки як-умин элемент ба оғози меҳвар, ва охирин - ба поёни он фишурда шудааст.
`space-around`	Блокҳо дар тири меҳвари амудӣ (верткалӣ) тақсим шудаанд, дар ҳоле ки байни блоки аввал ва оғози меҳвар, блоки охирин ва поёни меҳвар ҳамон миқдори фосила ҳаст, ки байни блокҳои дигар ҳаст. Аммо, онҳо баробар нестанд, тавре ки ба назар мерасад: фосилаҳо ҷамъ карда мешаванд ва байни ду блок масофа ду баробар зиёдтар аст, ки байни блок ва оғоз/поёни меҳвар.

Намуна . Қимати flex-start

Дар ин намуна меҳвар, ки ҷойгиркунӣ дар он иҷро мешавад аз боло ба поён равона шудааст, яъне он амудӣ аст. Чунон ки аз натиҷаи бадастомада дида мешавад, ҳамаи элементҳои мо ба қисми болоии он фишурда шудаанд:

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

Намуна . Қимати flex-end

Дар ин намуна блокҳо ба тарафи поёни меҳвари амудӣ фишурда шудаанд, зеро хосияти align-content дар қимати flex-end муқаррар шудааст:

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

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

Акнун блокҳо дар маркази меҳвари амудӣ ҷойгир карда шудаанд:

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

Ҷойгиркунӣ ба оғози меҳвари верткалӣ дар grid

Биёед ҷойгиркуниро барои элементҳои мо дар grid ба оғози меҳвари верткалӣ муқаррар кунем:

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

Ҷойгиркунӣ ба маркази меҳвари верткалӣ дар grid

Ва акнун биёед ҷойгиркунии элементҳоро ба маркази меҳвари верткалӣ муқаррар кунем:

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

Ҷойгиркунӣ ба поёни меҳвари верткалӣ дар grid

Биёед ҷойгиркунии элементҳоро ба поёни меҳвари верткалӣ муқаррар кунем:

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

Ҳамчунин бубинед

хосияти flex-direction,
ки самти меҳварҳои блокҳои flex-ро муқаррар мекунад
хосияти justify-content,
ки ҷойгиркуниро дар меҳвари асосӣ муқаррар мекунад
хосияти align-items,
ки ҷойгиркуниро дар меҳвари амудӣ муқаррар мекунад
хосияти flex-wrap,
ки серсатрии блокҳои flex-ро муқаррар мекунад
хосияти flex-flow,
ихтисор барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои flex-ро муқаррар мекунад
хосияти align-self,
ки ҷойгиркунии як блокро муқаррар мекунад
хосияти place-content,
ки ҷойгиркуниро дар меҳварҳои асосӣ ва амудӣ муқаррар мекунад