Хосияти justify-content

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

Синтаксис

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

Қиматҳо

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

Қимати пешфарз: flex-start.

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

Ҳоло самти меҳвар аз чап ба рост аст (инро flex-direction: row иҷро мекунад), ва блокҳо ба тарафи чап фишурдаанд:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

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

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

#parent {
	display: flex;
	justify-content: 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;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Намуна . Қимати space-between

Блокҳо дар баробари меҳвари асосӣ тақсим шудаанд, дар ҳоле ки элементҳои аввал ба оғози меҳвар фишурдааст, ва охирин - ба охири он:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Намуна . Қимати space-around

Блокҳо дар баробари меҳвари асосӣ тақсим шудаанд, дар ҳоле ки миёни блокҳои аввал ва оғози меҳвар, охирин блок ва охири меҳвар ҳамон миқдор фосила, ки миёни блокҳои дигар ҳаст. Аммо, фосилаҳо ҷамъ шуда ва миёни ду блок масофа ду баробар калонтар аст, аз миёни блок ва оғоз/охири меҳвар:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Намуна . Қимати center. Меҳвар ба поён

Самти меҳвари асосиро тағир диҳем, бо муайян кардани flex-direction дар қимати column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Намуна . Қимати space-between. Меҳвар ба поён

Ҳоло блокҳо баробари амудӣ тақсим мешаванд:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	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;
	justify-content: start;
	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;
}

Намуна . Ҷойгиркунӣ ба маркази меҳвари уфуқӣ дар grid

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

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

#parent {
	display: grid;
	justify-content: 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;
}

Намуна . Ҷойгиркунӣ ба охири меҳвари уфуқӣ дар grid

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

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

#parent {
	display: grid;
	justify-content: 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;
}

Инчунин нигаред

хосияти flex-direction,
ки самти меҳварҳои блокҳои flex-ро муайян мекунад
хосияти align-items,
ки ҷойгиркуниро дар меҳвари поперекӣ муайян мекунад
хосияти flex-wrap,
ки бисёрсатрӣ (multi-line) блокҳои 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