justify-content: space-between 要生效需同时满足：父容器为 flex、至少两个可渲染子项、主轴方向匹配；单子项时退化为 flex-start，伪元素 ::after 可补救；多行时仅作用于每行内部，固定间隙应改用 gap + flex-start 或 margin 控制。

justify-content: space-between 能快速撑开工具栏两端，但必须满足三个硬性条件：父容器是 display: flex、至少两个可渲染子项、主轴方向与预期一致——缺一不可。

为什么工具栏左边有内容右边没对齐？

最常见原因是工具栏里实际只有一个可见子元素（比如只写了 保存），justify-content: space-between 在单子项时完全不生效，它会退化为默认的 flex-start 对齐，所有内容堆在左侧。

• 检查 DOM 中是否真有两个以上子节点（空
  算，但 display: none 或 position: absolute 的不算）
• 别用 margin-left: auto 去“模拟”右对齐——它和 justify-content 冲突，且破坏 Flex 的统一控制逻辑
• 轻量补救法：加一个 ::after 伪元素，content: "" 即可让 Flex 认为有两个子项，触发 space-between

移动端工具栏换行后最后一行错位怎么办？

当设置 flex-wrap: wrap 后，justify-content: space-between 只作用于**每一行内部**，最后一行若不满，就会左对齐、右侧大片留白——这不是 bug，是规范行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 如果每行固定列数（如 4 个图标），可用 :nth-child(4n) 配合 margin-right: 0 清除末尾间隙
• 更稳方案：放弃 space-between，改用 gap: 12px + justify-content: flex-start，再靠 margin-left: auto 推最后一个按钮到右端
• 注意：iOS Safari 旧版本对多行 space-between 支持极差，测试时务必用真实设备

Logo 左对齐、操作按钮右对齐，但中间要留固定 40px 空隙

justify-content: space-between 不接受自定义间隙值，它只会均分“剩余空间”，所以当设计要求是「固定空白」而非「动态均分」时，它就失效了。

• 直接写 margin-left: 40px 给第一个按钮，再给 Logo 加 margin-right: auto，就能把按钮推到右侧并保持 40px 间距
• 如果按钮数量不固定，优先把 Logo 和按钮分别包进
  和

  ，再对这两个容器用 space-between
• 别给子元素设 flex: 1 或 width: 100%，否则它们会抢走所有空间，space-between 彻底失去作用

真正容易被忽略的是：子元素上若有 margin，它会叠加在 space-between 的间隙之外，导致实际间距翻倍或错乱。多数情况下，应该删掉所有 margin，只靠 Flex 自身对齐逻辑来控距。