justify-content没生效最常见的原因是父容器未设display: flex，或子元素脱离文档流（如float、absolute），或margin: auto冲突；左右对齐用flex-start/ flex-end而非left/right；IE10/11需加-ms-flex-pack前缀。
justify-content 在 flex 容器里为什么没生效
最常见的原因是父容器没设成 display: flex，或者子元素被设了 float、position: absolute 这类脱离文档流的样式，导致 justify-content 失去作用对象。
实操建议：
- 检查父容器是否明确写了
display: flex（仅inline-flex也行，但行为略有差异） - 确认子元素没有
margin: auto冲突——它在主轴方向会覆盖justify-content - 如果子元素是行内元素（如
），先确保它们被当作 flex 项目处理（默认会，但若父级有font-size: 0等干扰，可能引发间隙问题）
left / right 对齐该用 justify-content 哪个值
左右对齐对应的是 justify-content: flex-start（左）和 justify-content: flex-end（右），不是 left 或 right —— 那俩不是合法值，写了等于没写。
注意点：
-
flex-start对应容器主轴起点，不一定是“屏幕左边”；如果容器设了flex-direction: row-reverse，它就变成右对齐 - 想固定左/右，优先保持
flex-direction: row不变，再选flex-start或flex-end - 不要混用
text-align试图控制 flex 子项水平位置——它只影响行内内容，对 flex 项目无效
两个盒子一左一右，中间不留空怎么写
这不是靠 justify-content 单独解决的，得配合 margin 或 auto 挤出空间。常见错误是以为 space-between 就够了，但它会在首尾留空，不符合“贴边不留缝”要求。
推荐做法：
- 给左侧盒子加
margin-right: auto，右侧盒子不设 margin —— 这会把右侧盒子“推”到最右 - 或给右侧盒子加
margin-left: auto，效果一样，但语义更清晰（谁想靠右，就给谁加margin-left: auto） - 避免用
justify-content: space-between，除非你真需要首尾外边距相等
示例：
div.container { display: flex; }
div.left { margin-right: auto; }
div.right { }
IE10/11 下 justify-content 表现异常怎么办
IE 对 flex 的实现有偏差，尤其是 justify-content 在 flex-wrap: wrap 场景下容易错位，且不支持 space-evenly。
能做的有限但实用：
- 确认已加
display: -ms-flexbox和-ms-flex-pack（对应 IE 的私有前缀） -
-ms-flex-pack: start≈justify-content: flex-start，end/justify同理 - 如果项目必须兼容 IE 且逻辑复杂，宁可退回到
float+calc()布局，也别在 IE 里硬撑多层嵌套 flex
现代项目若无需支持 IE，直接忽略前缀即可；但只要还挂着 browserlist 里有 ie 11，构建工具（如 PostCSS）通常会自动补全，手动写前缀反而容易漏。
flex 主轴对齐看着简单，但真正卡住人的，往往是父容器没 flex、子项脱流、或 IE 下前缀没对齐这三处。盯住这三处，比反复调 justify-content 值有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
