Property place-content

place-content propertyси флекс элементлар учун асос ва кўндаланг ўқлар бўйича, гридлар учун эса горизонтал ва вертикал ўқлар бўйича текислашни белгилайди. Биринчи қиймат сифатида асос (горизонтал) ўқи бўйича текислаш, иккинчи қиймат сифатида - кўндаланг (вертикал) ўқи бўйича текислаш кўрсатилади. Property ота-она элементга қўлланилади.

Синтаксис

селектор {
	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 propertyси,
бу кўндаланг ёки вертикал ўқ бўйича текислашни белгилайди
justify-content propertyси,
бу асос ўқ бўйича текислашни белгилайди