align-self用于控制网格项在单元格内的垂直对齐方式，可覆盖align-items设置。支持start（顶部）、end（底部）、center（居中）、stretch（拉伸，默认）、baseline（基线）等值。通过为单个子元素设置align-self，可实现差异化对齐，如三栏布局中左右项分别顶部和底部对齐，中间项居中。当不使用stretch时，配合margin:auto可进一步精确控制位置，提升布局灵活性。
在 CSS Grid 布局中，align-self 属性用于控制单个网格项（grid item）在其网格单元格内的垂直对齐方式。它作用于子元素本身，允许你覆盖容器上设置的 align-items 行为。
align-self 可用值说明
以下为 align-self 支持的主要取值：
- start：元素与网格区域的起始边缘对齐（通常是顶部）
- end：元素与网格区域的结束边缘对齐（通常是底部）
- center：元素在网格区域内垂直居中
- stretch：默认值，元素拉伸以填满整个网格区域（忽略 margin 外边距）
- baseline：元素按基线对齐，适用于多个内联内容场景
基本使用方法
先定义一个 grid 容器，并为子元素单独设置 align-self：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch; /* 默认所有子项拉伸 */
height: 200px;
}
.item1 {
align-self: start;
}
.item2 {
align-self: center;
}
.item3 {
align-self: end;
}
上面代码中，虽然容器设置了 align-items: stretch，但每个子元素通过 align-self 实现了不同的垂直对齐效果。
立即学习“前端免费学习笔记（深入）”；
配合 margin 实现更灵活对齐
当 align-self: stretch 被禁用时（例如设置高度或使用其他对齐方式），你可以使用 margin: auto 辅助对齐：
.item-centered {
align-self: center;
margin: auto 0; /* 垂直居中，水平方向另设 */
}
这在需要精确控制单个元素位置时非常有用。
实际应用场景示例
比如在一个三栏布局中，你想让中间一栏内容垂直居中，而左右两栏顶部对齐：
.sidebar-left {
align-self: start;
}
.main-content {
align-self: center;
}
.sidebar-right {
align-self: end;
}
这样无需额外包装元素，直接通过 align-self 就能实现差异化对齐。
基本上就这些。合理使用 align-self 能让你在 grid 布局中更精细地控制每个子元素的对齐行为。
