Sifa place-content

Sifa place-content inaweka mpangilio wa vipengele kwenye mihimili kuu na ya pembeni kwa vipengele vya flex, na kwenye mihimili ya usawa na wima kwa gridi. Thamani ya kwanza inaonyesha mpangilio kwenye mhimili kuu (usawa), thamani ya pili - mhimili wa pembeni (wima). Sifa inatumika kwa kipengele kizazi.

Kisarufi

kichaguli {
	place-content: mhimili_kuu mhimili_pembeni;
}

Mfano . Kupangilia kwenye mwanzo wa mhimili kuu na katikati ya mhimili wa pembeni

Kwa sasa vipengele vimesukumwa kwenye sehemu ya juu ya mhimili kuu na wakati huo huo viko katikati ya mhimili wa pembeni:

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

Mfano . Kupangilia katikati ya mhimili kuu na mwisho wa mhimili wa pembeni

Na sasa vipengele vimepangiliwa katikati ya mhimili kuu na mwishoni mwa mhimili wa pembeni:

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

Mfano . Kupangilia mwisho wa mhimili kuu na mwanzo wa mhimili wa pembeni

Hapa vipengele vimesukumwa kwenye sehemu ya chini ya mhimili kuu na wakati huo huo kwenye mwanzo wa mhimili wa pembeni:

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

Mfano . Kupangilia kwenye mwanzo wa mhimili wima na mwisho wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu kwenye mwanzo wa mhimili wima na mwisho wa mhimili usawa:

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

Mfano . Kupangilia katikati ya mhimili wima na mwanzo wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu katikati ya mhimili wima na mwanzo wa mhimili usawa:

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

Mfano . Kupangilia mwisho wa mhimili wima na mwanzo wa mhimili usawa kwenye gridi

Wacha tupange vipengele vyetu mwishoni mwa mhimili wima na mwanzo wa mhimili usawa:

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

Angalia pia

sifa align-content,
ambayo inaweka mpangilio kwenye mhimili wa pembeni au wima
sifa justify-content,
ambayo inaweka mpangilio kwenye mhimili kuu