css的align-self属性属于flex布局体系中的单个项目属性，主要作用是定义当前弹性项目在交叉轴方向上的对齐方式，能够单独覆盖父容器设置的align-items属性值，让单个项目拥有区别于其他项目的对齐表现，在需要差异化调整单个项目位置的场景中非常实用。
align-self属性的基本语法
align-self的语法格式非常简单，直接赋值对应的关键字即可，不需要额外参数：
/* 基本语法 */
.selector {
align-self: stretch | flex-start | flex-end | center | baseline | auto;
}
其中auto是默认值，表示当前项目会继承父容器的align-items属性值，如果父容器没有设置align-items，则会使用stretch作为最终取值。
align-self的可选取值及效果
align-self的取值和align-items的取值基本一致，只是作用于单个项目，具体每个取值的效果如下：
| 取值 | 效果说明 |
|---|---|
| auto | 继承父容器的align-items值，无父容器设置则使用stretch |
| stretch | 如果项目未设置交叉轴方向的大小，会被拉伸填满容器的交叉轴空间 |
| flex-start | 项目对齐到交叉轴的起点位置 |
| flex-end | 项目对齐到交叉轴的终点位置 |
| center | 项目在交叉轴方向居中对齐 |
| baseline | 项目的第一行文字的基线对齐 |
align-self使用示例
下面通过一个完整的flex布局示例，展示不同align-self取值的实际效果，父容器设置align-items为center，其中第三个项目单独设置align-self为flex-end：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self示例</title>
<style>
.flex-container {
display: flex;
align-items: center; /* 容器默认交叉轴居中对齐 */
height: 300px;
width: 800px;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
width: 120px;
height: 80px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 80px;
margin: 0 10px;
}
/* 第三个项目单独设置align-self */
.item3 {
align-self: flex-end;
background-color: #2196F3;
}
/* 第四个项目设置baseline对齐 */
.item4 {
align-self: baseline;
height: 100px;
line-height: 100px;
background-color: #FF9800;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item item3">项目3</div>
<div class="flex-item item4">项目4</div>
<div class="flex-item">项目5</div>
</div>
</body>
</html>
运行上述代码后，可以看到除了项目3对齐到交叉轴终点，项目4按文字基线对齐外，其他项目都按照容器的center设置居中对齐，很好地体现了align-self覆盖父容器设置的特点。
align-self的使用注意事项
- align-self只在flex布局的弹性项目中生效，如果父容器没有设置
display: flex或display: inline-flex，该属性不会起作用。 - 如果项目在交叉轴方向设置了固定大小，
stretch取值会失效，项目会保持自身设置的大小。 - 当父容器设置
align-items: stretch时，单个项目设置align-self: auto也会表现为stretch，除非项目自身有交叉轴方向的大小设置。 - align-self不影响项目在主轴方向的位置，主轴方向的对齐需要使用justify-content或者单个项目的margin属性调整。
常见使用场景
当flex容器中大部分项目需要统一对齐，只有个别项目需要特殊对齐位置时，使用align-self可以避免给父容器写多个特殊选择器，直接给单个项目设置即可。比如卡片布局中，某个卡片的标题需要靠上对齐，其他内容居中，就可以给标题所在的项目单独设置align-self: flex-start，不需要调整整个容器的对齐规则。
cssalign-selfflex布局align_items修改时间：2026-07-20 12:03:29