1. align-self 属性是什么？原理简述
1.1 基本定义与作用域
在一个 flexbox 或 grid 布局中，align-self 用于覆盖该项在父容器上的对齐设置。它的核心作用是沿着交叉轴对齐单个子项，而不是影响同一容器中的其它子项。
该属性只对直接子项有效，覆盖了容器的 align-items 设置。当容器使用 display: flex 或 display: inline-flex 时，align-self 起作用；在 CSS Grid 中也有同名行为，但语义略有差异。
1.2 与 align-items 的关系
align-items 是对整组子项的统一对齐方式，而 align-self 允许单个子项偏离该全局对齐。通过在特定子项上设置 align-self，可以实现对局部对齐的微调。
如果某个子项的 align-self 设置为 auto，它会回退到父容器的 align-items 设置，保持一致性。
/* 示例：单个子项覆盖父容器对齐设置 */
.container { display:flex; align-items: center; } /* 交叉轴居中 */
.item--special { align-self: flex-start; } /* 该项顶对齐 */
2. 作用、用法与实战示例
2.1 常见使用场景
在一个水平排列的导航条、卡片组或表单行中，某个项需要与其他项对齐方式不同，此时就会用到 align-self。这可以实现 局部居中、顶部对齐、底部对齐等效果，而不破坏整组项的对齐规则。
与 flexbox 容器的全局对齐相比，align-self 提供了灵活的微调能力，使复杂布局更易维护。
2.2 实战示例：卡片网格中的单卡对齐
考虑一个卡片网格，其中大部分卡片需要在垂直方向上居中，但某个卡片的标题需要贴近顶端。通过在该卡片结构中对标题所在的容器项应用 align-self: flex-start，就能实现局部对齐。
下面给出一个简要的示例，展示如何在一个卡片内的按钮区域使用 align-self 调整位置：
/* HTML 结构假设：每个卡片为 .card，按钮在 .card__actions 内 */
.card { display: flex; flex-direction: column; height: 260px; }
.card__actions { margin-top: auto; align-self: flex-end; } /* 按钮区域靠底部对齐 */
3. 取值与含义
3.1 常用取值及语义
align-self 常见取值有 auto、flex-start、flex-end、center、baseline、stretch。每个取值都决定了沿交叉轴的对齐方式，结合容器的尺寸，产生不同的视觉效果。
其中 stretch 会使项在交叉轴方向拉伸以填满容器，但若子项有高度/高度约束，则不会强制拉伸。理解取值背后的对齐逻辑，是熟练使用 align-self 的关键。
3.2 与网格布局中的对齐
在 CSS Grid 布局中，align-self 同样可以改变单元格内的项目对齐，但网格对齐属性有时与 flexbox 的行为略有不同，需要结合 grid-auto-rows、grid-row 与 grid-column 进行综合考量。
实践中，grid 项目往往使用 align-self 实现异步数据行的对齐、图片基线对齐等效果，提升布局的稳定性与可重复性。
/* Grid 示例：单元格内项目对齐 */
.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.cell--special { align-self: stretch; } /* 该单元格内容自适应填充高度 */
4. 进阶技巧与兼容性注意
4.1 进阶技巧：结合容器高度动态响应
在需要响应高度变化的容器中，使用 align-self 与 min-height、flex-grow、flex-shrink 配合，可以实现视觉上稳定的对齐效果。
注意 不同浏览器对旧版本的 flexbox 实现存在差异，建议在关键交互处进行兼容性测试，结合前缀方案或现代浏览器的实现以确保一致性。
4.2 与布局策略的结合
在响应式设计中，align-self 常与 margin、gap、以及媒体查询共同使用，形成在不同断点下的局部对齐策略，从而实现优雅的布局收缩与扩展。
通过将对齐策略抽象为组件级别的 CSS 变量，可以在不同场景下重用 align-self 的取值，提升开发效率与代码可维护性。
