align-self用于单独控制flex项目在交叉轴的对齐方式，可覆盖align-items设置。其值包括auto（继承父级）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中）、stretch（拉伸填满）和baseline（基线对齐）。例如容器设align-items: flex-start时，某子项设align-self: center仍可垂直居中。常用于按钮居中、卡片布局调整或文本基线对齐等场景，提升布局精确度。
在 CSS Flexbox 布局中，align-self 属性用于单独控制某个 flex 项目（子元素）在交叉轴上的对齐方式，而不影响其他兄弟元素。它会覆盖容器上设置的 align-items 属性对该元素的影响。
align-self 可用值及效果
以下是 align-self 支持的主要取值及其作用：
- auto：默认值，继承父容器的 align-items 设置。若无父级设置，则表现为 stretch。
- flex-start：元素在交叉轴起点对齐（如上下布局中靠上对齐）。
- flex-end：元素在交叉轴终点对齐（如下方对齐）。
- center：元素在交叉轴居中对齐。
- stretch：元素拉伸以填满容器（忽略 margin 外边距），是 align-items 的默认行为。
- baseline：元素按基线对齐，常用于文本内容对齐场景。
使用示例
假设有一个 flex 容器，包含三个子元素，我们让其中一个单独居中：
.container {
display: flex;
align-items: flex-start; /* 默认都靠上对齐 */
}
.item-center {
align-self: center; / 单独这个元素居中 /
}
在这个例子中，即使容器设为 flex-start，类名为 item-center 的元素仍会在交叉轴居中显示。
立即学习“前端免费学习笔记（深入）”；
适用场景建议
当你需要微调某个子元素的垂直（或横轴，取决于 flex-direction）对齐时，align-self 非常实用。常见用途包括：
基本上就这些，不复杂但容易忽略细节。灵活使用 align-self 能让你的布局更精确。
