在CSS Grid布局的实际开发中，我们常常需要先给整个网格容器设置统一的垂直对齐规则，再针对个别特殊的子元素做个性化调整，align-self属性就是用来实现单个网格子元素垂直对齐控制的核心属性，它可以覆盖容器层面align-items设置的全局对齐规则。
align-self属性基本定义
align-self是CSS Grid布局中作用于网格子元素的属性，专门用来控制单个子元素在其所在的网格行内的垂直对齐方式。它的优先级高于容器上设置的align-items属性，也就是说如果同时给容器设置了align-items，又给某个子元素设置了align-self，那么该子元素会优先遵循align-self的取值。
需要注意的是，align-self只对Grid布局的子元素生效，普通流布局或者Flex布局的子元素使用这个属性不会有效果。它的取值和align-items的取值完全一致，只是作用范围从整个容器的所有子元素缩小到了单个指定子元素。
align-self常用取值说明
align-self支持以下常用取值，不同取值对应不同的对齐效果：
- stretch：默认值，子元素会拉伸填满整个网格行的高度，如果子元素本身有固定高度，这个取值不会生效。
- start：子元素对齐到网格行的起始边缘，也就是顶部对齐。
- end：子元素对齐到网格行的结束边缘，也就是底部对齐。
- center：子元素在网格行内垂直居中对齐。
- baseline：子元素按照自身的文本基线对齐，多用在包含文本内容的子元素对齐场景中。
align-self使用语法
align-self的使用语法非常简单，直接给目标网格子元素设置即可，不需要额外的复杂配置：
/* 给单个网格子元素设置底部对齐 */
.grid-item-special {
align-self: end;
}
如果子元素本身有固定高度，对齐效果会更明显，因为stretch默认值在子元素有固定高度时会失效，这时候其他取值的对齐差异会直接体现出来。
实际代码示例
下面通过一个完整的Grid布局示例，展示align-self对不同子元素的对齐效果，首先是对应的HTML结构：
<div class="grid-container">
<div class="grid-item item1">普通子元素1</div>
<div class="grid-item item2">设置了align-self:center的子元素</div>
<div class="grid-item item3">普通子元素3</div>
<div class="grid-item item4">设置了align-self:end的子元素</div>
</div>
接下来是对应的CSS样式，容器设置统一的Grid布局和align-items规则，再给个别子元素单独设置align-self：
/* 网格容器样式 */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
height: 300px;
align-items: start; /* 容器全局设置顶部对齐 */
border: 1px solid #ccc;
padding: 10px;
}
/* 所有子元素通用样式 */
.grid-item {
width: 100%;
background-color: #e0f7fa;
padding: 10px;
border-radius: 4px;
}
/* 第二个子元素设置垂直居中 */
.item2 {
align-self: center;
height: 60px;
}
/* 第四个子元素设置底部对齐 */
.item4 {
align-self: end;
height: 60px;
}
运行上面的代码后，可以看到item1和item3遵循容器的align-items:start规则，顶部对齐；item2会在自身的网格行内垂直居中；item4会在自身的网格行内底部对齐，完美实现了单个子元素的个性化垂直对齐需求。
align-self和align-items的区别
很多开发者容易混淆align-self和align-items，两者的核心区别如下：
| 对比项 | align-items | align-self |
|---|---|---|
| 作用对象 | Grid布局容器 | Grid布局单个子元素 |
| 作用范围 | 容器内所有网格子元素 | 仅当前设置了该属性的单个子元素 |
| 优先级 | 较低，会被子元素的align-self覆盖 | 较高，覆盖容器的align-items规则 |
实际开发中，我们可以先通过align-items设置大部分子元素的对齐规则，再用align-self调整个别特殊子元素的对齐方式，这样能减少重复代码，提升开发效率。
使用注意事项
- align-self只对Grid布局的直接子元素生效，嵌套在子元素内部的后代元素设置这个属性没有效果。
- 如果网格行的高度为auto，也就是由内容撑开，那么stretch取值的效果不明显，这时候其他对齐取值的差异也会变小。
- 不要和justify-self属性混淆，justify-self控制的是水平方向的对齐，align-self控制的是垂直方向的对齐，两者可以配合使用实现单个子元素的任意位置对齐。
align-self是Grid布局中非常实用的单个子元素对齐属性，掌握它的用法可以让我们更灵活地控制布局细节，应对各种个性化的对齐需求。
Grid布局align-self属性CSS对齐单个子元素对齐网格布局修改时间：2026-06-25 13:30:35