justify-content: space-between 不保证左右栏等宽，仅首尾贴边、中间均分；需用 flex: 1 或 width: 50% 先确保子项占地一致，再配合使用才实现真正对称。
flex布局里justify-content: space-between为什么加删元素后左右不对齐
因为space-between只管“首尾贴边、中间均分”，不保证左右容器自身宽度一致。如果左右两栏内容长度差异大（比如左栏是"用户"，右栏是"退出登录 | 个人设置 | 消息通知"），视觉上就会明显右偏——这不是bug，是它本来的设计逻辑。
实操建议：
- 左右两栏必须用
display: flex包裹，并设flex: 1或固定等宽（如width: 50%），让它们先“占地一样大” - 再在父容器上用
justify-content: space-between，此时才是真正的“左右对称扩展” - 避免给子项设
margin或padding破坏宽度基准，尤其别用margin-left: auto这类手动推挤方式
CSS Grid中用grid-template-columns: 1fr 1fr比Flex更稳吗
更稳，前提是你要的是“严格等宽+自动适应”。1fr 1fr强制把可用空间劈成两份，不管里面塞"A"还是"AAAAAAAAAAAAAAAAAAAA"，左右轨道宽度始终相等；而Flex的flex: 1在内容超长时可能触发最小宽度保护（min-width: auto），导致实际不等宽。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: grid，且grid-template-columns: 1fr 1fr要写全，不能只写1fr - 如果左右内容高度差异大，记得加
align-items: center或flex-start统一基线 - IE11不支持
fr单位，若需兼容，得回退到grid-template-columns: 50% 50%，但此时响应式断点要额外处理
用text-align: justify强行撑开左右两端行不行
不行。这是文本对齐手段，只对**内联级内容**（如文字、span）生效，且依赖浏览器自动插空格。一旦左右是两个div块级容器，justify完全无效；就算套了text-align-last: justify，也只影响最后一行，无法控制整体版面平衡。
常见错误现象：
- 写了
text-align: justify但左右栏纹丝不动 - 加了
::after { content: ""; display: inline-block; width: 100%; }试图欺骗浏览器——这会把最后一行拉满，但左右容器本身依然不对称 - 误以为
letter-spacing或word-spacing能撑开布局，其实它们只影响字符间距，不改变盒模型尺寸
响应式下左右自动扩展失效的典型原因
多数问题出在“忘了断点重置布局”。比如桌面端用grid实现双栏，移动端却没改成flex-direction: column，导致左右栏被硬压在同一行、溢出或换行错乱。
关键检查项：
- 媒体查询里是否覆盖了
display、grid-template-columns和flex-direction这三个属性 - 是否用了
max-width或padding干扰了可用空间计算（比如父容器padding: 0 20px，但1fr按全宽算） - 有没有用
white-space: nowrap锁死内容，让子元素无法换行，进而撑爆容器
真正难的不是写一行1fr 1fr，而是确保从320px到4k所有宽度下，左右轨道的“可分配空间”始终干净、无干扰、可预测。
