align-self属性可让Flex子元素单独覆盖父容器align-items设定，实现交叉轴上的独立对齐。例如父容器设align-items: center时，某子项通过align-self: flex-start可顶部对齐，其余保持居中。常见于表单、卡片、导航布局，使整体统一又具局部灵活性。该属性仅作用于直接子元素，auto值时继承父级设置。掌握它能提升Flexbox布局的精细控制能力。
在使用 CSS Flexbox 布局时，align-self 属性允许单个子元素覆盖父容器（flex 容器）中设置的对齐方式，实现更灵活的布局控制。即使父容器通过 align-items 统一设置了交叉轴上的对齐规则，个别子项仍可通过 align-self 独立调整自己的对齐行为。
align-items 与 align-self 的关系
align-items 在 flex 容器上定义所有子元素在交叉轴（cross axis）上的默认对齐方式，例如：
• flex-start：顶部对齐（垂直方向）• flex-end：底部对齐
• center：居中对齐
• stretch：拉伸填满容器（默认值）
• baseline：基线对齐
而 align-self 可以在任意子元素上单独设置，它会覆盖 align-items 的设定，让某个特定项目拥有不同的对齐方式。
如何使用 align-self 覆盖父级设置
假设有一个 flex 容器设置了 align-items: center，大多数子项都应在交叉轴居中，但其中一个需要靠顶部对齐：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: center; / 所有子项默认居中 /
}
.item-special {
align-self: flex-start; / 单独设置，覆盖父级 /
}
此时，.item-special 元素将在交叉轴上对齐到起点，而其他子元素保持居中。
常见应用场景
• 表单布局中，某些输入框需要顶部对齐，其余居中• 卡片组件中，标题居中，但按钮下沉到底部
• 导航栏中多数项目居中，但下拉菜单单独对齐到顶部
这个机制让 Flexbox 在保持整体一致的同时，也能轻松处理局部差异。
注意点
• align-self 只作用于 flex 子元素，非直接子项无效• 如果父容器使用 align-content 而不是 align-items，align-self 不受影响
• 当 align-self 设为 auto 时，继承 align-items 的值
基本上就这些。用好 align-self，可以让 flex 布局既统一又灵活。不复杂但容易忽略。
