justify-content默认对底部对齐无效，因其控制主轴（默认水平）左右对齐；需设flex-direction: column后用justify-content: flex-end，或保持row用align-items: flex-end（需父容器有明确高度），最可靠的是margin-top: auto。
flex容器里justify-content对底部对齐没用？
因为 justify-content 控制的是主轴（main axis）上的对齐，而默认主轴是水平的（flex-direction: row），所以它调的是左右对齐，不是上下。想让子元素贴底，得先让主轴变成垂直方向。
- 把
flex-direction改成column，此时主轴向下，justify-content: flex-end才真能推到容器底部 - 或者保持
row，改用align-items: flex-end（控制交叉轴对齐）——但注意：这会让所有子项整体“下沉”，前提是父容器有明确高度且子项不占满高度 - 如果父容器高度由内容撑开，
align-items: flex-end看不出效果，因为没“底”可贴
为什么用margin-top: auto比justify-content更可靠？
当父容器是 flex-direction: column 时，给要底部对齐的子元素加 margin-top: auto，会自动吸走它上方所有剩余空间，强制它沉到底部。这个技巧不依赖容器是否设了高度，也不受 justify-content 的全局影响。
- 只作用于单个子元素，不影响其他兄弟节点
- 兼容性好（Flexbox 基础属性，IE10+ 支持）
- 比
align-self: flex-end更直接——后者仍需确保父容器主轴为 column 或交叉轴有空间 - 示例：
.container { display: flex; flex-direction: column; height: 300px; }<br>.item-bottom { margin-top: auto; }
absolute定位和flex底部对齐混用会出什么问题？
常见错误是给 flex 子项同时加 position: absolute 和 bottom: 0，结果发现它脱离文档流、不再参与 flex 布局计算，可能遮挡其他内容，或导致父容器高度塌陷。
- flex 布局和 absolute 定位逻辑冲突：前者靠空间分配，后者靠脱离流+偏移
- 如果真要用 absolute，父容器必须设
position: relative，且该子项不应再承担 flex 排列职责 - 优先用 flex 原生方案（
margin-top: auto或justify-content: flex-end+flex-direction: column），避免叠加复杂度
移动端iOS Safari里flex-end偶尔失效？
老版本 iOS Safari（尤其是 iOS 9–12）对 flex-direction: column + justify-content: flex-end 的渲染有 bug，特别是父容器高度来自 vh 单位时，可能计算不准。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：用
min-height: 100vh替代height: 100vh，避免视口高度未就绪导致 flex 计算失败 - 更稳方案：换
margin-top: auto，它在这些旧版中表现一致 - 别依赖
align-self: flex-end在 row 主轴下强行“贴底”，交叉轴对齐行为在不同浏览器中差异更大
