align-self在Bootstrap Flex容器中不起作用，是因为父容器未启用Flex布局（缺少d-flex等类）、目标元素非直接子元素或父容器无明确高度；需确保父容器有d-flex且高度约束，子元素为直系子项。
align-self 在 Bootstrap Flex 容器中为什么不起作用？
直接给子元素加 align-self-start 或 align-self-center 没反应？大概率是因为父容器没启用 Flex 布局——Bootstrap 的 Flex 工具类（如 d-flex、d-inline-flex）必须显式设置，否则 align-self-* 类完全无效。
另外注意：只有当父容器是 Flex 容器（即 display: flex 或 inline-flex），且该子元素是直接子元素时，align-self 才生效。嵌套多层后加在孙子元素上，会失效。
-
d-flex是最常用的基础类，必须加在父容器上 - 如果父容器本身是
display: block（比如默认的div），加再多align-self-*都没用 - Bootstrap 5+ 支持完整的
align-self-*值：align-self-start、align-self-end、align-self-center、align-self-baseline、align-self-stretch（默认）、align-self-auto
怎么给 Flex 子元素单独设置垂直对齐？
确保父容器有 d-flex 后，直接在目标子元素上添加对应类即可。不需要额外 CSS，也不依赖 flex-direction 方向——align-self 控制的是交叉轴对齐，横排时控制上下，竖排时控制左右。
<div class="d-flex"> <div class="align-self-start">顶部对齐</div> <div class="align-self-center">居中对齐</div> <div class="align-self-end">底部对齐</div> </div>
- 若父容器用了
flex-column（即竖排），align-self-center会让该子元素在水平方向居中 -
align-self-stretch是默认行为，一般不用显式写；但可用于覆盖父级align-items设置 - 响应式版本存在，比如
align-self-md-center表示仅在 md 及以上断点生效
和 align-items 冲突怎么办？
align-items 是父容器属性，统一控制所有子元素的交叉轴对齐；align-self 是子元素属性，优先级更高——只要子元素设了 align-self-*，就会覆盖父级 align-items 的值。
- 父容器设
align-items-end，但某个子元素想居中？直接加align-self-center即可覆盖 - 如果子元素没设
align-self，它就完全遵循父级align-items - 注意：Bootstrap 中
align-items-*和align-self-*是两套独立类，别混淆命名（没有align-self-items这种写法）
常见失效场景和排查点
遇到 align-self-* 不生效，先看这三件事：
- 父容器是否漏了
d-flex或d-inline-flex？这是最常被忽略的前提 - 目标元素是不是 Flex 容器的**直接子元素**？中间隔了其他 wrapper
div就会失效 - 是否误用了
justify-content-*（主轴对齐）来试图控制垂直方向？横排时它是左右对齐，不是上下 - 检查浏览器 DevTools：确认元素 computed 样式里是否有
align-self: center，以及父级是否真为display: flex
Flex 对齐逻辑本身不复杂，但 Bootstrap 的类名体系容易让人误以为“写了就起作用”。真正卡住的，往往就是那一个漏掉的 d-flex。
