Thuộc tính justify-content

Thuộc tính justify-content thiết lập cách căn chỉnh các phần tử dọc theo trục chính cho các khối flex và theo trục ngang cho grid. Được áp dụng cho phần tử cha.

Cú pháp

bộ chọn {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Các giá trị

Giá trị	Mô tả
`flex-start`	Các khối được đẩy sát về đầu trục chính (ngang).
`flex-end`	Các khối được đẩy sát về cuối trục chính (ngang).
`center`	Các khối được đặt ở giữa trục chính (ngang).
`space-between`	Các khối được phân bổ đều dọc theo trục chính (ngang), trong đó phần tử đầu tiên được đẩy sát về đầu trục, và phần tử cuối cùng - sát về cuối trục.
`space-around`	Các khối được phân bổ dọc theo trục chính (ngang), trong đó khoảng cách giữa khối đầu tiên và đầu trục, khối cuối cùng và cuối trục bằng với khoảng cách giữa các khối còn lại. Tuy nhiên, chúng không bằng nhau, như có thể tưởng tượng: các khoảng trống được cộng dồn và giữa hai khối khoảng cách lớn gấp đôi so với giữa khối và đầu/cuối trục.

Giá trị mặc định: flex-start.

Ví dụ . Giá trị flex-start

Hiện tại trục có hướng từ trái sang phải (điều này do flex-direction: row tạo ra), và các khối được đẩy sát về phía bên trái:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị flex-end

Trong ví dụ này trục cũng có hướng từ trái sang phải, nhưng các khối được đẩy sát về phía bên phải, vì justify-content được đặt với giá trị flex-end:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị center

Hiện tại các khối sẽ đứng ở giữa bất kể hướng của trục chính:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị space-between

Các khối được phân bổ đều dọc theo trục chính, trong đó phần tử đầu tiên được đẩy sát về đầu trục, và phần tử cuối cùng - sát về cuối trục:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị space-around

Các khối được phân bổ dọc theo trục chính, trong đó khoảng cách giữa khối đầu tiên và đầu trục, khối cuối cùng và cuối trục bằng với khoảng cách giữa các khối còn lại. Tuy nhiên, các khoảng cách được cộng dồn và giữa hai khối khoảng cách lớn gấp đôi so với giữa khối và đầu/cuối trục:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị center. Trục hướng xuống

Hãy thay đổi hướng của trục chính bằng cách đặt flex-direction với giá trị column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị space-between. Trục hướng xuống

Hiện tại các khối sẽ được phân bổ đều theo chiều dọc:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Căn chỉnh theo đầu trục ngang (hàng) trong grid

Hãy thiết lập căn chỉnh cho các phần tử của chúng ta 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-content: start;
	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;
}

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

Và bây giờ hãy thiết lập căn chỉnh cho các phần tử của chúng ta 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-content: 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;
}

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

Hãy thiết lập căn chỉnh cho 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-content: 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;
}

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục cho các khối flex
thuộc tính align-items,
thiết lập căn chỉnh theo trục phụ
thuộc tính flex-wrap,
thiết lập tính đa dòng cho các khối flex
thuộc tính flex-flow,
cú pháp viết tắt cho flex-direction và flex-wrap
thuộc tính order,
thiết lập thứ tự cho các khối flex
thuộc tính align-self,
thiết lập căn chỉnh cho một khối riêng biệt
thuộc tính flex-basis,
thiết lập kích thước cho một khối flex cụ thể
thuộc tính flex-grow,
thiết lập độ "tham lam" của các khối flex
thuộc tính flex-shrink,
thiết lập độ co lại của các khối flex
thuộc tính flex,
cú pháp viết tắt cho flex-grow, flex-shrink và flex-basis