justify-content: space-between 左侧元素未贴左，主因是父容器存在padding、子元素有margin或flex/width设置导致空间被抢占；需检查computed样式、重置首尾外边距、控制子项宽度及换行行为，并注意ie11兼容性问题。
flex布局中justify-content: space-between为什么左边元素没贴左？
因为space-between只在主轴方向分配剩余空间，前提是容器有明确宽度、子元素不撑满且数量≥2。常见现象是：左侧元素看起来“缩进”了，实际是父容器有内边距、子元素有外边距，或第一个子元素本身带默认margin（比如h1或p）。
实操建议：
- 检查父容器是否设置了
padding，尤其是padding-left - 重置子元素首尾的
margin：*:first-child { margin-left: 0; }或直接写margin: 0 - 确保子元素没有设置
flex: 1或width: 100%——这会让它们抢占空间，space-between就失效了 - 用浏览器开发者工具选中父容器，看computed样式里
justify-content是否生效、主轴是否为row
左右对齐时右侧元素换行或错位怎么办？
这是space-between最典型的失效场景：当子元素总宽度超过容器，浏览器会按flex换行规则处理，默认flex-wrap: nowrap，于是强行压缩或溢出；设成wrap又可能导致右元素掉到下一行。
实操建议：
- 优先控制子元素宽度：用
flex-shrink: 0防压缩，配合min-width保内容完整 - 不用
space-between硬撑，改用display: flex+margin-left: auto推右元素：.right-item { margin-left: auto; } - 如果必须用
space-between且元素动态增减，加一层包裹：<div class="left-group">…</div> <div class="right-group">…</div>，让两组作为两个子项
IE11里justify-content: space-between不生效？
IE11支持flex，但对space-between有兼容陷阱：它要求父容器必须声明display: -ms-flexbox（旧语法），且子元素不能是inline元素（如未设display: block的span）。
实操建议：
- 加前缀：
justify-content: -ms-flex-pack: justify;（注意不是space-between，IE用justify） - 确保子元素是块级或设
display: -ms-flexbox子项 - 更稳妥的做法是放弃IE11的
space-between，改用text-align: justify+::after伪元素撑开（仅限纯文本场景） - 现代项目建议直接忽略IE11，或用PostCSS自动补全前缀（需配
autoprefixer支持ie 11）
用space-between做导航栏左右对齐，Logo和菜单间距忽大忽小？
这是因为space-between把“剩余空间”平均分给中间间隙，而导航项宽度不固定（比如文字长度不同、图标尺寸不一），导致间隙宽度浮动，视觉不稳定。
实操建议：
- 固定关键元素宽度：Logo用
flex: 0 0 120px，菜单容器用flex: 1占剩余空间再内部右对齐 - 菜单本身别用
space-between，改用margin-left: auto推到最右 - 如果菜单项是
flex排列，每个项加flex: 0 0 auto防拉伸，再用gap控间距（注意gap在Flex中IE不支持） - 真要靠
space-between，就强制所有导航项等宽：flex: 1+min-width，但牺牲了文字自然排布
真正难的不是写上justify-content: space-between，而是判断此刻它是不是最合适的解法——有时候一个margin-left: auto比调十遍space-between更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
