align-self仅作用于交叉轴，优先级高于align-items但低于margin: auto；在flex-direction: row时控制垂直对齐（如flex-end实现底部对齐），需父容器有明确高度且子元素未设margin: auto。
flex容器里子元素怎么单独底部对齐
用 align-self，不是 align-items —— 后者作用于整个容器，前者才控制单个子项在交叉轴（通常是垂直方向）的位置。
常见错误是给子元素设了 align-self: flex-end 却没生效，大概率因为父容器没开 flex 布局，或者交叉轴方向不对（比如容器是 flex-direction: row，交叉轴才是垂直方向，此时 align-self 才管用）。
- 父容器必须有
display: flex或display: inline-flex - 子元素默认继承父容器的
align-items值，align-self可覆盖它 -
align-self: flex-end在垂直方向（column）下会把它“顶到最下面”，但在水平方向（row）下才是“沉到底部”——别记反了轴向
为什么加了 align-self: flex-end 还不生效
最常踩的坑：父容器高度没撑开。Flex 项的“底部对齐”是相对于父容器的交叉轴尺寸计算的；如果父容器高度为 auto（比如没设高、没内容撑开），那它的交叉轴长度就是 0，所有项自然挤在顶部，align-self 就没空间可对齐。
- 检查父容器是否设置了明确高度（如
height: 300px）或最小高度（min-height: 100vh） - 用浏览器开发者工具选中父容器，看 computed height 是否为预期值
- 如果父容器本身是 flex 子项，还要确认它的父级是否给了足够的交叉轴空间
flex-direction: column 时怎么让某个子元素贴底
当容器是竖排（flex-direction: column），主轴变成垂直方向，交叉轴就变成水平方向，这时 align-self 控制的是左右对齐，不是上下。想让某子项“贴底”，得换思路：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 保持
flex-direction: row（默认），用align-self: flex-end实现垂直底部对齐 - 如果必须用
column，改用margin-top: auto给目标子元素 —— 它会把前面所有空间“吸走”，自己沉到底部 -
margin-top: auto是更可靠的选择，尤其在嵌套 flex 或动态内容场景下，比依赖交叉轴尺寸更稳定
示例：
.container { display: flex; flex-direction: column; height: 400px; }
.sticky-bottom { margin-top: auto; }
align-self 在 Grid 和 Flex 中行为一样吗
名字一样，但作用域不同：在 Flex 中，align-self 指向交叉轴；在 Grid 中，它指向单元格的块方向（block axis），也就是通常的垂直方向 —— 看似一致，但 Grid 里还受 justify-self 和容器 place-items 影响更大，容易混淆。
如果你正在混用 Flex 和 Grid（比如用 Grid 布局整体结构，内部某个区域又用 Flex），别想当然复用 align-self 的经验。Flex 里的 flex-end 在 Grid 容器中可能被 align-items: start 覆盖掉，得逐层检查 computed 样式。
真正容易被忽略的点：浏览器渲染时，align-self 不触发重排，但会影响布局计算顺序；在 JS 动态插入元素后立即读取 offsetTop，可能拿到旧值 —— 需要 getComputedStyle 或 requestAnimationFrame 做兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
