Thuộc tính align-items

Thuộc tính align-items xác định cách 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-items: flex-start | flex-end | center | baseline | stretch;
}

Giá trị

Giá trị	Mô tả
`flex-start`	Các khối được đẩy sát vào điểm bắt đầu của trục chéo (trục dọc).
`flex-end`	Các khối được đẩy sát vào điểm kết thúc của trục chéo (trục dọc).
`center`	Các khối được đặt ở giữa trục chéo (trục dọc).
`baseline`	Các phần tử được căn chỉnh theo đường cơ sở của chúng. Đường cơ sở là một đường tưởng tượng, chạy dọc theo cạnh dưới của các ký tự không tính đến các phần nhô ra, ví dụ như ở các chữ cái `'p'` và `'y'`.
`stretch`	Các khối được kéo giãn, chiếm toàn bộ không gian có sẵn dọc theo trục chéo, tuy nhiên vẫn tính đến `min-width` và `max-width` nếu chúng được đặt. Nếu đã đặt chiều rộng và chiều cao cho các phần tử - `stretch` sẽ bị bỏ qua.

Giá trị mặc định: stretch.

Ví dụ . Giá trị stretch

Hiện tại trục chính hướng từ trái sang phải, còn theo trục chéo các phần tử được kéo giãn trên toàn bộ chiều cao:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Ví dụ . Giá trị stretch + kích thước phần tử

Hiện tại các phần tử được đặt chiều rộng và chiều cao, do đó giá trị stretch cho thuộc tính align-items sẽ bị bỏ qua:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị flex-start không có kích thước phần tử

Hiện tại các phần tử sẽ được đẩy sát lên trên:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Ví dụ . Giá trị flex-start + kích thước phần tử

Hiện tại các phần tử vẫn sẽ được đẩy sát lên trên, tuy nhiên chúng sẽ có chiều rộng và chiều cao được đặt:

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

#parent {
	display: flex;
	align-items: 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 + kích thước phần tử

Hiện tại các phần tử sẽ được đẩy sát xuống dưới:

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

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

Ví dụ . Giá trị center + kích thước phần tử

Hiện tại các phần tử sẽ đứng ở giữa theo trục chéo (trong trường hợp này là 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;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị center, các phần tử có kích thước khác nhau

Hiện tại các phần tử có kích thước chiều cao khác nhau (hiện tại chúng được mở rộng bởi văn bản, nhưng có thể đặt height), chiều rộng của tất cả đều như nhau, vì thuộc tính width đã được đặt:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Ví dụ . Giá trị baseline, các phần tử có kích thước khác nhau

Còn đây là cách căn chỉnh theo đường cơ sở trông như thế nào:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

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

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

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

#parent {
	display: grid;
	align-items: flex-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à bây giờ hãy xem grid của chúng ta trong trình gỡ lỗi của trình duyệt:

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

Và bây giờ hãy căn chỉnh các phần tử của chúng ta trong các ô theo giữa trục dọc:

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

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

Hãy xem cách hiển thị grid trong trình gỡ lỗi:

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

Một lần nữa thay đổi cách căn chỉnh phần tử, lần này là theo điểm kết thúc của trục dọc:

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

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

Và bây giờ hãy xem grid của chúng ta trông như thế nào qua trình gỡ lỗi:

Xem thêm

thuộc tính flex-direction,
xác định hướng của các trục cho khối flex
thuộc tính justify-content,
xác định căn chỉnh theo trục chính
thuộc tính align-items,
xác định căn chỉnh theo trục chéo
thuộc tính flex-wrap,
xác định tính đa dòng của các khối flex
thuộc tính flex-flow,
viết tắt cho flex-direction và flex-wrap
thuộc tính order,
xác định thứ tự của các khối flex
thuộc tính align-self,
xác định căn chỉnh của một khối riêng lẻ
thuộc tính flex-basis,
xác định kích thước của một khối flex cụ thể
thuộc tính flex-grow,
xác định mức độ mở rộng của các khối flex
thuộc tính flex-shrink,
xác định mức độ co lại của các khối flex
thuộc tính flex,
viết tắt cho flex-grow, flex-shrink và flex-basis