justify-content: space-between 仅在父容器设 display: flex、子元素≥2个且主轴有剩余空间时生效；失效常见于未设flex、宽度超限、子项占满空间或仅一个子元素。
justify-content: space-between 为什么没反应
它只在父容器设了 display: flex、子元素 ≥ 2 个、且主轴方向有剩余空间时才生效。常见失效原因：
• 父容器没写 display: flex 或宽度是 fit-content
• 两个按钮都设了 width: 50% 还加了 gap，总宽超 100%，flex 自动压缩或换行
• 子元素用了 flex: 1 或 width: 100%，把可用空间吃光，没“之间”可分
• 只有一个子元素——space-between 无意义，会退化为左对齐
两个按钮严格左/右各一个，用 margin-left: auto 更稳
当结构明确（如「取消」「确认」），不依赖数量、不惧换行、语义清晰：
• 给左侧按钮加 margin-right: auto，它就贴最左
• 给右侧按钮加 margin-left: auto，它就贴最右
• 中间可插任意内容（比如标题），只要不设 flex: 1 就不会抢空间
• 注意：两个按钮不能同时设 auto 外边距，否则中间留空不可控
• 配合 align-items: center 才算真正水平+垂直都对齐
多行布局下最后一行要左对齐，别硬套 space-between
justify-content: space-between 在 flex-wrap: wrap 下会对每一行生效，最后一行只有 2 个元素时也会被拉到两端——这不是 bug，是规范行为。
• 推荐方案：用 gap + justify-content: flex-start
• gap 控制项间距离，flex-start 保证每行都从左开始排布
• 兼容旧浏览器（如 Safari 13.1 以下）时，改用 .item:not(:nth-child(4n)) { margin-right: 16px; }，但要注意 DOM 动态增删或 display: none 会让 :nth-child 错位
想要两端留白 + 中间等距，gap 是唯一靠谱解法
justify-content: space-between 的两端永远是 0 距离，它只管“首尾钉死、中间均分”。真要实现“最左项离左边缘有 16px、最右项离右边缘也有 16px、中间所有间隙都是 16px”，必须用 gap：
• 单行：设 column-gap: 16px（即 gap: 0 16px）
• 多行：设 gap: 12px 16px，第一值是行间距，第二值是列间距
• gap 不干扰 justify-content 和 align-items，可放心搭配 flex-start 使用
• 老版 Safari 对 gap 支持差，若需兼容，用 margin-right 模拟，但得手动处理最后一项
真正容易被忽略的是容器的 align-items。两端对齐只管水平，按钮高度不一致时，垂直方向会参差——加一句 align-items: center 才算完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
