Thuộc tính align-self

Thuộc tính align-self thiết lập căn chỉnh dọc theo trục chéo cho một flex-block riêng biệt và theo trục dọc cho một phần tử riêng lẻ trong grid. Về bản chất, thuộc tính này đại diện cho thuộc tính align-items, nhưng dành cho một block cụ thể.

Cú pháp

bộ chọn {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Các giá trị

Giá trị	Mô tả
`flex-start`	Block được đẩy sát vào đầu trục chéo.
`flex-end`	Block được đẩy sát vào cuối trục chéo.
`center`	Block nằm ở giữa trục chéo.
`baseline`	Block được căn chỉnh theo đường cơ sở của chính nó. Đườ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ự mà không tính đến các phần nhô xuống, ví dụ, như ở các chữ cái `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Block được kéo giãn, chiếm tất cả 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 thiết lập. Nếu chiều rộng và chiều cao được đặt cho phần tử - `stretch` sẽ bị bỏ qua.
`auto`	Block sẽ được căn chỉnh theo cách được thiết lập trong thuộc tính `align-items`.

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

Ví dụ . Giá trị stretch

Trong ví dụ này, tất cả các block được đặt giá trị flex-start (thuộc tính align-items), còn block thứ ba - align-self với giá trị stretch:

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

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

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

Trong ví dụ này, tất cả các block đối với thuộc tính align-items được đặt giá trị flex-start, còn block thứ ba - align-self với giá trị flex-end:

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

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

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

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">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 {
	align-self: start;
}

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

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

<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 {
	align-self: center;
}

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

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

<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 {
	align-self: end;
}

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục trong flex blocks
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 của flex blocks
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 flex blocks
thuộc tính flex-basis,
thiết lập kích thước cho một flex block cụ thể
thuộc tính flex-grow,
thiết lập mức độ "tham lam" của flex blocks
thuộc tính flex-shrink,
thiết lập mức độ co lại của flex blocks
thuộc tính flex,
cách viết tắt cho flex-grow, flex-shrink và flex-basis