Thuộc tính justify-items

Thuộc tính justify-items xác định căn chỉnh các phần tử bên trong các ô của lưới theo trục ngang. Cách căn chỉnh có thể thấy rõ nhất khi xem lưới trong công cụ gỡ lỗi của trình duyệt. Được áp dụng cho phần tử cha.

Cú pháp

bộ chọn {
	justify-items: flex-start | flex-end | center ;
}

Giá trị

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

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

Hãy căn chỉnh các phần tử của chúng ta bên trong các ô theo đầu trục ngang:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Bây giờ hãy xem lưới của chúng ta trong công cụ gỡ lỗi:

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

Hãy căn chỉnh các phần tử của chúng ta trong các ô theo giữa trục ngang:

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

Sau khi kết nối công cụ gỡ lỗi trình duyệt, chúng ta sẽ thấy lưới của mình:

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

Hãy căn chỉnh các phần tử của chúng ta theo cuối trục ngang:

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

Bây giờ hãy xem lưới qua công cụ gỡ lỗi:

Xem thêm

thuộc tính align-items,
xác định căn chỉnh theo trục chéo
thuộc tính place-items,
xác định cách căn chỉnh các phần tử bên trong các ô lưới