align-self属性可单独控制Flex子元素在交叉轴的对齐方式，覆盖align-items设置。例如容器设align-items:flex-start时，通过为特定子项添加align-self:flex-end，可使其独立底部对齐，适用于表单、卡片布局等需差异化垂直对齐的场景。
在 Flex 布局中，align-self 属性可以单独控制某个子元素在交叉轴（cross axis）上的对齐方式，而不影响其他子元素。这让你能灵活地调整特定项目的垂直对齐效果。
理解 align-self 的作用
默认情况下，Flex 容器中的子元素会遵循容器的 align-items 设置进行对齐。但当你想让其中一个子项与众不同，就可以使用 align-self 覆盖这个统一设置。
例如：容器设置了 align-items: center;，但你想让某个子元素靠上或靠下，只需给它设置 align-self: flex-start; 或 align-self: flex-end; 即可。
可用的 align-self 值
- auto：默认值，继承父容器的 align-items 行为
- flex-start：与交叉轴起点对齐（如顶部对齐）
- flex-end：与交叉轴终点对齐（如底部对齐）
- center：在交叉轴居中对齐
- baseline：按文本基线对齐
- stretch：拉伸以填满容器（前提是未设置固定尺寸）
实际使用示例
假设有一个 Flex 容器，内部有三个子元素，我们只让中间那个向下对齐：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="item item1">顶部项</div> <div class="item item2">中间项（底部对齐）</div> <div class="item item3">底部项</div> </div>
顶部项
中间项（底部对齐）
底部项
CSS 如下：
.container {
display: flex;
align-items: flex-start;
height: 200px;
}
<p>.item2 {
align-self: flex-end; /<em> 只这个元素到底部 </em>/
}</p>适用场景建议
这个属性特别适合以下情况：
- 表单布局中某一项需要底部对齐图标或按钮
- 卡片组件内，部分内容需要上对齐、另一部分下对齐
- 导航栏中有元素需要独立垂直定位
基本上就这些。只要记得 align-self 是“个别覆盖”，而 align-items 是“统一管理”，就能轻松掌握它的用法。不复杂但容易忽略细节。
