Sifat place-content

Sifat place-content menetapkan penjajaran elemen pada paksi utama dan silang untuk elemen fleksibel, dan pada paksi mendatar dan menegak untuk grid. Nilai pertama menentukan penjajaran pada paksi utama (mendatar), nilai kedua - pada paksi silang (menegak). Sifat ini digunakan pada elemen induk.

Sintaks

selector {
	place-content: paksi_utama paksi_silang;
}

Contoh . Penjajaran pada permulaan paksi utama dan pusat paksi silang

Sekarang elemen dilekatkan pada bahagian atas paksi utama dan secara serentak berada di tengah paksi 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 . Penjajaran pada pusat paksi utama dan hujung paksi silang

Dan sekarang elemen terletak di tengah paksi utama dan di hujung paksi 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 . Penjajaran pada hujung paksi utama dan permulaan paksi silang

Di sini elemen dilekatkan pada bahagian bawah paksi utama dan secara serentak ke permulaan paksi 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 . Penjajaran pada permulaan paksi menegak dan hujung paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada permulaan paksi menegak dan hujung paksi mendatar:

<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 . Penjajaran pada pusat paksi menegak dan permulaan paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada pusat paksi menegak dan permulaan paksi mendatar:

<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 . Penjajaran pada hujung paksi menegak dan permulaan paksi mendatar dalam grid

Mari kita jajarkan elemen kita pada hujung paksi menegak dan permulaan paksi mendatar:

<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

sifat align-content,
yang menetapkan penjajaran pada paksi silang atau menegak
sifat justify-content,
yang menetapkan penjajaran pada paksi utama