justify-content: flex-end 在 flex-direction: column 时才能实现底部对齐；默认 row 方向下它仅右对齐，因主轴为水平方向，且需容器有明确高度才生效，否则无“底”可贴；更可靠方案是子项设 margin-top: auto。
justify-content: flex-end 在 Flex 布局中实现“底部对齐”，只在 flex-direction: column 时真正起作用；默认 flex-direction: row 下它只会把内容推到右边界，不是底部。
为什么 justify-content: flex-end 在默认水平流里不贴底
因为 justify-content 控制的是主轴（main axis）上的对齐，而 Flex 默认主轴是水平的（flex-direction: row），所以 flex-end 表示“右对齐”，不是“下对齐”。想让它管底部，得先让主轴变成垂直方向。
- 检查是否漏写了
flex-direction: column - 如果写了但没效果，大概率是容器本身没高度——
justify-content: flex-end需要容器有明确的可用空间才能“推到底” - 父级若为
height: auto，子容器即使设了100vh也可能被截断，尤其在body或html上没设height: 100%时
容器必须有明确高度才能生效
Flex 容器若靠内容撑高（height: auto），justify-content: flex-end 就没“底”可对齐——它只是把项目挤到主轴末端，而末端就是内容最后一行的下方，视觉上毫无变化。
- 给容器加
height、min-height或继承自固定高父级（如html, body { height: 100%; }） - 避免在
position: absolute元素上同时用display: flex+justify-content: flex-end依赖文档流高度 - 移动端注意：
100vh在 Safari 中可能包含地址栏高度，导致实际可视区域小于预期
比 justify-content 更可靠的替代方案：margin-top: auto
当容器是 flex-direction: column 时，直接给要贴底的子元素加 margin-top: auto，它会自动吸走上方所有剩余空间，强制下沉到底部——这个技巧不依赖容器是否有显式高度，也不受 justify-content 全局设置干扰。
- 只作用于单个子项，不影响其他兄弟元素排布
- 兼容性好（Chrome 29+ / Firefox 20+ / Safari 6.1+ / Edge 12+）
- 如果容器里还有其它需要居中或顶部的元素，
margin-top: auto比改justify-content更精准可控
真正容易被忽略的点是：很多人调了半天 justify-content: flex-end 没反应，第一反应是查语法，其实该先打开开发者工具看一眼容器的实际渲染高度——它是不是 0px 或刚够容纳内容？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
