Thuộc tính justify-self

Thuộc tính justify-self thiết lập căn chỉnh của một phần tử riêng lẻ trong Grid dọc theo trục ngang. Thuộc tính được áp dụng cho phần tử mà chúng ta muốn căn chỉnh.

Cú pháp

phần-tử {
	justify-self: start | center | end;
}

Giá trị

Giá trị	Mô tả
`flex-start`	Phần tử được đẩy về đầu trục ngang.
`flex-end`	Phần tử được đẩy về cuối trục ngang.
`center`	Phần tử được căn giữa theo trục ngang.

Ví dụ . Căn chỉnh theo đầu trục ngang

Hãy thiết lập căn chỉnh cho phần tử đầu tiên của chúng ta theo đầu trục ngang:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: start;
}

Ví dụ . Căn chỉnh theo giữa trục ngang

Hãy thiết lập căn chỉnh cho phần tử đầu tiên theo giữa trục ngang:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: center;
}

Ví dụ . Căn chỉnh theo cuối trục ngang

Hãy thiết lập căn chỉnh cho phần tử đầu tiên theo cuối trục ngang:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: end;
}

Xem thêm

thuộc tính place-self,
thiết lập căn chỉnh của một phần tử riêng lẻ trong Grid
thuộc tính align-self,
thiết lập căn chỉnh của một khối