Thuộc tính place-content

Thuộc tính place-content thiết lập căn chỉnh các phần tử theo trục chính và trục chéo cho các phần tử flex, và theo trục ngang và trục dọc cho grid. Giá trị đầu tiên chỉ định căn chỉnh theo trục chính (ngang), giá trị thứ hai - theo trục chéo (dọc). Thuộc tính được áp dụng cho phần tử cha.

Cú pháp

selector {
	place-content: main_axis cross_axis;
}

Ví dụ . Căn chỉnh theo điểm đầu trục chính và giữa trục chéo

Hiện tại các phần tử được đẩy sát về phía trên của trục chính và đồng thời nằm ở giữa trục chéo:

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

Ví dụ . Căn chỉnh theo giữa trục chính và điểm cuối trục chéo

Và bây giờ các phần tử được đặt ở giữa trục chính và ở cuối trục chéo:

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

Ví dụ . Căn chỉnh theo điểm cuối trục chính và điểm đầu trục chéo

Ở đây các phần tử được đẩy sát về phía dưới của trục chính và đồng thời về điểm đầu trục chéo:

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

Ví dụ . Căn chỉnh theo điểm đầu trục dọc và điểm cuối trục ngang trong grid

Hãy căn chỉnh các phần tử của chúng ta theo điểm đầu trục dọc và điểm cuối trục ngang:

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

Ví dụ . Căn chỉnh theo giữa trục dọc và điểm đầu trục ngang trong grid

Hãy căn chỉnh các phần tử của chúng ta theo giữa trục dọc và điểm đầu trục ngang:

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

Ví dụ . Căn chỉnh theo điểm cuối trục dọc và điểm đầu trục ngang trong grid

Hãy căn chỉnh các phần tử của chúng ta theo điểm cuối trục dọc và điểm đầu trục ngang:

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

Xem thêm

thuộc tính align-content,
thiết lập căn chỉnh theo trục chéo hoặc trục dọc
thuộc tính justify-content,
thiết lập căn chỉnh theo trục chính