Thuộc tính align-content

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

Cú pháp

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

Giá trị

Giá trị	Mô tả
`flex-start`	Các khối được ép sát vào điểm bắt đầu của trục chéo (dọc).
`flex-end`	Các khối được ép sát vào điểm kết thúc của trục chéo (dọc).
`center`	Các khối nằm ở giữa trục chéo (dọc).
`space-between`	Các khối được phân bổ dọc theo trục chéo (dọc), trong đó phần tử đầu tiên ép sát vào điểm bắt đầu trục, còn phần tử cuối cùng - vào điểm kết thúc.
`space-around`	Các khối được phân bổ dọc theo trục chéo (dọc), trong đó khoảng cách giữa khối đầu tiên và điểm bắt đầu trục, giữa khối cuối cùng và điểm kết thúc trục cũng bằng 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: các khoảng cách được cộng dồn và giữa hai khối khoảng cách sẽ lớn gấp đôi so với khoảng cách giữa khối và điểm bắt đầu/kết thúc trục.

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

Trong ví dụ này, trục mà việc căn chỉnh diễn ra có hướng từ trên xuống dưới, tức nó là trục chéo. Như có thể thấy từ kết quả, tất cả các phần tử của chúng ta đều bị ép sát vào phần trên của nó:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	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, các khối bị ép sát vào cạnh dưới của trục chéo, vì thuộc tính align-content được đặt với giá trị flex-end:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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 được căn giữa trục chéo:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Căn chỉnh theo điểm bắt đầu trục dọc trong grid

Hãy thiết lập căn chỉnh cho các phần tử trong grid theo điểm bắt đầu trục dọc:

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

#parent {
	display: grid;
	align-content: 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;
}

Căn chỉnh theo giữa trục dọc trong grid

Và bây giờ hãy thiết lập căn chỉnh các phần tử theo giữa trục dọc:

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

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

Căn chỉnh theo điểm kết thúc trục dọc trong grid

Hãy thiết lập căn chỉnh các phần tử theo điểm kết thúc trục dọc:

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

#parent {
	display: grid;
	align-content: 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;
}

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục trong khối flex
thuộc tính justify-content,
thiết lập căn chỉnh theo trục chính
thuộc tính align-items,
thiết lập căn chỉnh theo trục chéo
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ách viết tắt cho flex-direction và flex-wrap
thuộc tính order,
thiết lập thứ tự của 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 place-content,
thiết lập căn chỉnh theo trục chính và trục chéo