align-self用于单独控制弹性子元素在交叉轴上的对齐方式，可覆盖align-items设置。其常用值包括auto、flex-start、flex-end、center、stretch和baseline，适用于需要微调个别元素位置的场景，如卡片布局或表单对齐。该属性仅在父容器为display: flex或inline-flex时生效，能精准实现单个元素的对齐控制而不影响整体布局。
align-self 是 CSS Flexbox 布局中的一个属性，用于单独控制某个弹性子元素在交叉轴（cross axis）上的对齐方式，而不影响其他子元素。它会覆盖容器上设置的 align-items 属性对该元素的影响。
align-self 的常用取值
以下是 align-self 支持的主要值：- auto：默认值，继承父容器的 align-items 设置，若无父容器则为 stretch
- flex-start：元素在交叉轴起点对齐
- flex-end：元素在交叉轴终点对齐
- center：元素在交叉轴居中对齐
- stretch：元素拉伸以填满容器（忽略 margin）
- baseline：元素按基线对齐，常用于文本对齐场景
实际使用示例
假设有一个 flex 容器，多数子项居中，但想让其中一个顶部对齐：
.container {
display: flex;
align-items: center; /* 所有子项默认居中 */
height: 200px;
}
.item-special {
align-self: flex-start; / 单独控制这个元素靠上对齐 /
}
在这个例子中，除了 .item-special 会贴着容器顶部对齐外，其余子元素仍保持居中。
适用场景与注意事项
align-self 特别适用于需要微调个别元素位置的布局情况：- 卡片布局中某张卡片需要上对齐
- 表单内某个输入框需要与其他控件垂直对齐不同
- 导航栏中某个图标或文字需要单独调整垂直位置
display: flex 或 display: inline-flex 时生效。在 Grid 布局中也有类似行为，但作用机制略有不同。基本上就这些。灵活使用 align-self 能让你在不破坏整体布局的前提下，精准控制单个元素的对齐效果。
