Хусусияти justify-items

Хусусияти justify-items ҳамвории унсурҳоро дар дохили ҳуҷайраҳои решотка аз рӯи меҳвари уфуқӣ муайян мекунад. Ҳамвориро бештар баён метавон мушоҳида кард ҳангоми дидани решотка дар барномаи таҳлилгари браузер. Ба унсури волидайн татбиқ мешавад.

Синтаксис

интихобкунанда {
	justify-items: flex-start | flex-end | center ;
}

Қиматҳо

Қимат	Шарҳ
`flex-start`	Унсурҳо ба оғози меҳвари уфуқӣ фишурда мешаванд.
`flex-end`	Блокҳо ба поёни меҳвари уфуқӣ фишурда мешаванд.
`center`	Блокҳо дар маркази меҳвари уфуқӣ қарор мегиранд.

Намуна . Ҳамворӣ ба оғози меҳвари уфуқӣ

Биёед унсурҳои худро дар дохили ҳуҷайраҳо ба оғози меҳвари уфуқӣ ҳамвор кунем:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Акнун биёед ба решоткаи худ дар барномаи таҳлилгар назар андозем:

Намуна . Ҳамворӣ ба маркази меҳвари уфуқӣ

Биёед унсурҳои худро дар ҳуҷайраҳо ба маркази меҳвари уфуқӣ ҳамвор кунем:

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

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Барномаи таҳлилгари браузерро пайваст карда, мо решоткаи худро хоҳем дид:

Намуна . Ҳамворӣ ба поёни меҳвари уфуқӣ

Биёед унсурҳои худро ба поёни меҳвари уфуқӣ ҳамвор кунем:

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

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Акнун ба решотка тавассути барномаи таҳлилгар назар андозем:

Ҳамчунин нигаред

хусусияти align-items,
ки ҳамвориро аз рӯи меҳвари амудӣ муайян мекунад
хусусияти place-items,
ки ҳамвории унсурҳоро дар дохили ҳуҷайраҳои решотка муайян мекунад