align-self用于控制单个弹性子元素在交叉轴上的对齐方式，可覆盖父容器的align-items设置。其常用取值包括auto（继承父级）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（基线对齐）和stretch（拉伸填充）。例如当容器设置align-items: center时，为某个子元素设置align-self: flex-end可使其单独向下对齐。使用前提是父容器为Flex布局（display: flex或inline-flex），且交叉轴方向受flex-direction影响；若子元素有固定高度，stretch可能无法完全生效。合理使用align-self能精确调整个别元素的垂直位置而不影响整体布局。
在 CSS Flexbox 布局中，align-self 属性用于控制单个弹性子元素（即“单元格”）在其交叉轴上的对齐方式，也就是实现垂直方向的偏移或对齐。它会覆盖父容器中 align-items 的设置，只作用于当前子元素。
align-self 可用值及效果
以下是 align-self 支持的主要取值及其表现：
- auto：默认值，继承父容器的 align-items 设置。
- flex-start：元素顶部对齐（在垂直方向上靠上）。
- flex-end：元素底部对齐（在垂直方向上靠下）。
- center：元素在交叉轴居中对齐。
- baseline：元素基线对齐。
- stretch：拉伸元素以填满容器（除非有固定尺寸）。
实际使用示例
假设有一个 Flex 容器，内部包含三个子元素，我们想让中间那个元素向下对齐：
<div style="display: flex; align-items: center; height: 200px; border: 1px solid #ccc;"> <div style="background: #ffcccc; padding: 10px;">顶部对齐</div> <div style="background: #ccffcc; padding: 10px; align-self: flex-end;">我往下偏移了</div> <div style="background: #ccccff; padding: 10px;">仍居中</div> </div>
在这个例子中：
立即学习“前端免费学习笔记（深入）”；
- 容器设置了 align-items: center，所以所有子项默认垂直居中。
- 第二个子项添加了 align-self: flex-end，因此它会单独向下对齐。
注意事项
要使 align-self 生效，必须满足以下条件：
- 父容器是 Flex 布局（display: flex 或 display: inline-flex）。
- 交叉轴方向取决于 flex-direction。例如，当主轴为 row 时，垂直方向就是交叉轴，align-self 控制的就是垂直对齐。
- 如果子元素设置了固定高度或 min-height，stretch 效果可能不会完全拉伸。
基本上就这些。用好 align-self 能让你灵活控制个别元素的垂直位置，而不影响整体布局。