Хосияти place-content

Хосияти place-content мувофиқ кардани элементҳоро бар асоси меҳварҳои асосӣ ва фаръӣ барои элементҳои флекс, ва бар асоси меҳварҳои уфуқӣ ва амудӣ барои ғридҳо муайян мекунад. Қимати аввал мувофиқ карданро бар асоси меҳвари асосӣ (уфуқӣ) муайян мекунад, қимати дуюм - бар асоси меҳвари фаръӣ (амудӣ). Хосият ба элементи волидайн татбиқ мешавад.

Синтаксис

selector {
	place-content: меҳвари_асосӣ меҳвари_фаръӣ;
}

Мисол . Мувофиқ кардан бар асоси оғози меҳвари асосӣ ва маркази меҳвари фаръӣ

Дар ҳол аз элементҳо ба қисми болоии меҳвари асосӣ фишурда шудаанд ва ҳамзамон дар маркази меҳвари фаръӣ қарор доранд:

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

#parent {
	display: flex;
	place-content: start center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисол . Мувофиқ кардан бар асоси маркази меҳвари асосӣ ва охири меҳвари фаръӣ

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

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

#parent {
	display: flex;
	place-content: center end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисол . Мувофиқ кардан бар асоси охири меҳвари асосӣ ва оғози меҳвари фаръӣ

Дар ин ҷо элементҳо ба қисми поёнии меҳвари асосӣ фишурда шудаанд ва ҳамзамон ба оғози меҳвари фаръӣ:

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

#parent {
	display: flex;
	place-content: end start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисол . Мувофиқ кардан бар асоси оғози меҳвари амудӣ ва охири меҳвари уфуқӣ дар ғрид

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

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

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

Мисол . Мувофиқ кардан бар асоси маркази меҳвари амудӣ ва оғози меҳвари уфуқӣ дар ғрид

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

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

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

Мисол . Мувофиқ кардан бар асоси охири меҳвари амудӣ ва оғози меҳвари уфуқӣ дар ғрид

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

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

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

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

хосияти align-content,
ки мувофиқ карданро бар асоси меҳвари фаръӣ ё амудӣ муайян мекунад
хосияти justify-content,
ки мувофиқ карданро бар асоси меҳвари асосӣ муайян мекунад