space-around 在小容器中首尾间距被压缩为0是规范行为而非bug；推荐用gap替代，它能稳定控制首尾间距，但ie不支持，现代浏览器已普遍兼容。
flexbox 的 space-around 在小容器里会“挤掉”首尾间距
它不是 bug，是规范定义的行为：当容器宽度不足以容纳所有子项加平均分配的间隙时，space-around 会压缩首尾的“半倍间隙”，甚至压到 0。你看到子项紧贴容器边缘，不是样式没生效，是浏览器按标准在退让。
- 典型场景：
display: flex+justify-content: space-around+ 子项宽度固定（如width: 120px）+ 容器宽度刚好卡在临界点（比如 360–380px） - 真实表现：3 个子项本该有“半间隙-全间隙-半间隙”，但容器一窄，首尾的“半间隙”先归零，只剩中间两个全间隙——看起来像
space-between - 别用媒体查询硬切
justify-content，响应式切换会导致布局跳动，尤其配合动画或 SSR 时更明显
用 gap 替代 justify-content: space-around 更可控
gap 是真正的间距控制属性，不依赖容器剩余空间分配逻辑，首尾不会被吃掉。但它要求父容器是 display: flex 或 grid，且仅对直接子项生效。
- Flex 场景下，
gap会均匀作用于相邻子项之间，首尾自动留出等量空白（即等效于你想要的“space-around 效果”） - 兼容性注意：
gap在 Flex 中 IE 完全不支持，Chrome 84+/Firefox 63+/Safari 14.1+ 支持；若需兼容旧版 Safari（margin 手动模拟 - 别和
justify-content混用——gap已接管间距，再设space-around不仅冗余，还可能在某些安卓 WebView 中引发冲突
示例：
.container {
display: flex;
gap: 16px; /* ✅ 首尾各留 16px，中间也是 16px */
/* ❌ 删除 justify-content: space-around */
}百分比宽度子项 + space-around 会放大计算误差
当子项用 width: 33.333% 这类非整除值，又叠加 space-around 的动态间隙分配，浏览器在 sub-pixel 渲染阶段容易出现累积误差——某一行子项总宽超 100%，触发换行或溢出，而你检查 CSS 时根本看不出问题。
立即学习“前端免费学习笔记（深入）”；
- 解决思路不是调精度，而是改结构：把百分比移到父容器（如用
flex-basis或min-width控制最小占位），子项用flex: 1让 flex 引擎统一算剩余空间 - 如果必须用百分比，建议用
calc(33.333% - 2px)主动预留间隙空间，其中2px≈ 单侧间隙的一半（假设gap: 4px） - Chrome DevTools 的“Layout Shift Regions”能帮你定位这类因 sub-pixel 导致的意外换行，打开 Rendering 面板勾选即可
真正要防的不是 space-around，是隐式 flex 基线对齐
很多人以为间距异常是 space-around 的锅，结果调试半天发现是 align-items: baseline（flex 默认值）导致子项高度不一致，视觉上“间隙不对齐”。尤其混用文字、图标、按钮时，基线差异会让上下空隙看起来忽大忽小。
- 快速验证：给父容器加
align-items: stretch或flex-start，看间距是否立刻“整齐” - 如果需要基线对齐（比如表单控件），就别依赖
space-around做垂直节奏控制，改用row-gap（Flex 中已支持）或包裹一层margin-block - 注意：
gap只控制主轴/交叉轴间距，不影响对齐方式；align-items和gap是正交关系，可以共存
复杂点在于：视觉上的“间距问题”，八成不是间距本身的问题，而是对齐、盒模型、渲染精度三者叠在一起，只盯着 justify-content 调，永远调不干净。
