CSS - align-self 属性_CSS 菜鸟教程

CSS align-self 属性控制使用 flexbox 或网格布局的容器中单个项的对齐方式。虽然 align-items 用于为容器中的所有项设置默认对齐方式，但 align-self 会覆盖特定项的对齐方式。

在 flexbox 中，项目在交叉轴上对齐，而在网格中，该属性将项目对齐网格区域内。

语法

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

属性值

值	描述
auto	该元素继承其父容器的 align-items 属性，如果没有父容器，则使用 “stretch”违约。
stretch	元素放置在适合容器的位置。
center	该元素被放置在容器的中心位置。
flex-start	该元素被放置在容器的起始位置。
flex-end	该元素被放置在容器的结束位置。
baseline	该元素将放置在容器的基线位置。
initial	这会将属性设置为其默认值。
inherit	这将从父元素继承属性。

CSS align self 属性的示例

以下示例说明具有不同值的 align-self 属性。

Flex 项的默认位置

为了让 flex 项目采用 align-items 属性给出的位置而没有自己的位置，我们使用 auto 值。在以下示例中，第三个 flex 项设置为 flex 容器内的初始位置。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex_container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex_container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 	
	 	 	 	 }

	 	 	 	 .flex-item {
	 	 	 	 	 	 align-self: auto;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex_container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 	 	 <div>Flex item 5</div>
	 	 </div>
</body>

</html>

拉伸 flex 项

为了让 flex 项的位置更适合容器，我们使用 stretch 值。在以下示例中，各个 flex 项被垂直拉伸以填充 flex 容器的可用空间。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex-container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 350px;
	 	 	 	 	 	 flex-wrap: wrap;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex-container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 		
	 	 	 	 }
	 	 	 	 .flex-item{
	 	 	 	 	 	 align-self:stretch;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex-container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 </div>
</body>

</html>

Flex 项位于中心

为了让 flex 项处于中心位置，而不是其他 flex 项的位置，我们使用 center 值。在以下示例中，第三个 flex 项设置为 flex 容器的交叉轴中心。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex_container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex_container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 	 height: 50px;
	 	 	 	 }

	 	 	 	 .flex-item {
	 	 	 	 	 	 align-self: center;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex_container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 	 	 <div>Flex item 5</div>
	 	 </div>
</body>

</html>

开始时的 Flex 项

为了让 flex 项相对于其他 flex 项处于起始位置，我们使用 flex-start 值。在以下示例中，第三个 flex 项设置为 flex 容器的交叉轴的起点。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex_container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex_container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 	 height: 50px;
	 	 	 	 }

	 	 	 	 .flex-item {
	 	 	 	 	 	 align-self: flex-start;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex_container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 	 	 <div>Flex item 5</div>
	 	 </div>
</body>

</html>

End 的 Flex 项

为了让 flex 项目相对于其他 flex 项目处于结束位置，我们使用 flex-end 值。在以下示例中，第三个 flex 项设置为 flex 容器的交叉轴的末端。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex_container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex_container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 	 height: 50px;
	 	 	 	 }

	 	 	 	 .flex-item {
	 	 	 	 	 	 align-self: flex-end;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex_container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 	 	 <div>Flex item 5</div>
	 	 </div>
</body>

</html>

基准处的 Flex 项

为了让 flex 项位于容器的基线处，我们使用 baseline 值。在以下示例中，第三个 flex 项沿容器的基线设置。

例

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .flex_container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 border:1px solid black;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 gap:10px;
	 	 	 	 }

	 	 	 	 .flex_container div {
	 	 	 	 	 	 background-color: grey;
	 	 	 	 	 	 border:2px solid black;
	 	 	 	 	 	 height: 50px;
	 	 	 	 }

	 	 	 	 .flex-item {
	 	 	 	 	 	 align-self: baseline;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS align-self property</h2>
	 	 <div class="flex_container">
	 	 	 	 <div>Flex item 1</div>
	 	 	 	 <div>Flex item 2</div>
	 	 	 	 <div class="flex-item">Flex item 3</div>
	 	 	 	 <div>Flex item 4</div>
	 	 	 	 <div>Flex item 5</div>
	 	 </div>
</body>

</html>

支持的浏览器

属性
align-self	57.0	16.0	52.0	10.1	44.0

<< CSS - align-items 属性 CSS - animation-delay 属性 >>