justify-content: flex-end 未生效的主因是父容器未设 display: flex 或子元素脱离文档流；其对齐方向由 flex-direction 决定，与 text-align 无关，右对齐单个元素推荐用 margin-left: auto。
justify-content: flex-end 为什么没生效
常见原因是父容器没设 display: flex，或者子元素被设了 Float、position: absolute 这类脱离文档流的属性。flex 布局只作用于「标准流中的直接子元素」。
- 检查父容器是否真有
display: flex（不是inline-flex也能用，但会影响盒模型） - 确认子元素没有
margin-left: auto这类干扰项——它会覆盖justify-content - 如果用了
flex-direction: column，justify-content: flex-end就变成“在交叉轴（即垂直方向）底部对齐”，不是你想要的“右对齐”
flex-end 和 margin-left: auto 哪个更可靠
margin-left: auto 更精准，只影响单个弹性项；justify-content: flex-end 是整行统一对齐，一旦加新元素就全挤到右边。
- 要右对齐一个按钮（比如表单里的“提交”），优先用
margin-left: auto给它加样式 - 要让整组导航菜单贴右，才用父容器的
justify-content: flex-end - 注意：
margin-left: auto在 IE10–IE11 中支持不一致，如果必须兼容，老老实实用justify-content
主轴方向变化时 justify-content 的行为
justify-content 总是对齐主轴，而主轴由 flex-direction 决定。很多人调成 column 后发现“右对齐失效”，其实是它在控制上下对齐。
-
flex-direction: row（默认）→ 主轴水平 →flex-end= 靠右 -
flex-direction: row-reverse→ 主轴还是水平，但起点在右 →flex-end= 靠左 -
flex-direction: column→ 主轴垂直 →flex-end= 靠下 - 别硬记，打开浏览器开发者工具，改
flex-direction实时看效果最准
和 text-align: right 混用会怎样
完全无关。text-align 控制的是**内联内容**（比如文字、图片作为普通流元素）的对齐，对 flex 子项无效。强行加只会让子项内部的文字右对齐，不影响子项自身位置。
立即学习“前端免费学习笔记（深入）”；
- 如果子项是
<div>按钮</div>，text-align: right只会让“按钮”两个字靠右，盒子本身还在原位 - 如果子项是
<span>文字</span>且没设宽高，它甚至可能被压缩成一行内联表现，flex 属性部分失效 - 真正想控制位置，只动 flex 相关属性，别扯 text-align
实际布局中，最容易被忽略的是主轴方向与对齐目标的错配——写完 justify-content: flex-end 却忘了父容器是不是真的按你预期的方向伸展。调试时先确认 flex-direction 和容器尺寸，比反复调 justify-content 有用得多。