Properti place-content

Properti place-content mengatur perataan elemen pada sumbu utama dan sumbu silang untuk elemen flex, dan pada sumbu horizontal dan vertikal untuk grid. Nilai pertama menentukan perataan pada sumbu utama (horizontal), nilai kedua - pada sumbu silang (vertikal). Properti ini diterapkan pada elemen induk.

Sintaks

selector {
	place-content: sumbu_utama sumbu_silang;
}

Contoh . Perataan di Awal Sumbu Utama dan Tengah Sumbu Silang

Saat ini elemen-elemen ditempatkan di bagian atas sumbu utama dan secara bersamaan berada di tengah sumbu silang:

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

Contoh . Perataan di Tengah Sumbu Utama dan Akhir Sumbu Silang

Dan sekarang elemen-elemen ditempatkan di tengah sumbu utama dan di akhir sumbu silang:

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

Contoh . Perataan di Akhir Sumbu Utama dan Awal Sumbu Silang

Di sini elemen-elemen ditempatkan di bagian bawah sumbu utama dan secara bersamaan di awal sumbu silang:

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

Contoh . Perataan di Awal Sumbu Vertikal dan Akhir Sumbu Horizontal di Grid

Mari kita ratakan elemen-elemen kita di awal vertikal dan akhir sumbu horizontal:

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

Contoh . Perataan di Tengah Sumbu Vertikal dan Awal Sumbu Horizontal di Grid

Mari kita ratakan elemen-elemen kita di tengah vertikal dan awal sumbu horizontal:

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

Contoh . Perataan di Akhir Sumbu Vertikal dan Awal Sumbu Horizontal di Grid

Mari kita ratakan elemen-elemen kita di akhir vertikal dan awal sumbu horizontal:

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

Lihat Juga

properti align-content,
yang mengatur perataan pada sumbu silang atau sumbu vertikal
properti justify-content,
yang mengatur perataan pada sumbu utama