space-between 无法真正均分间距，因其仅将剩余空间均分于子项之间，首尾无空隙且子项宽度影响视觉效果；可靠方案是 gap + justify-content: center 配合 padding，或兼容旧版的 margin 负边距模拟。
flex 用 space-between 无法真正“均分”间距——它只把空白平均分配在子项之间，首尾不贴边，且子项自身宽度会影响视觉“均分”效果。真要等距排列（含首尾到容器边缘的距离），得换思路。
为什么 space-between 看起来不均分？
根本原因是：space-between 把「剩余空间」只切分成「子项数 − 1」份，全部塞进项与项之间，首项前、末项后不留空。如果子项宽度不一致，或容器宽度不能被整除，人眼就会觉得间距“不匀”。常见于动态内容、响应式布局中。
典型表现：
- 第一项紧贴容器左边缘，最后一项紧贴右边缘，中间间隙明显更大
- 换屏幕尺寸后，某几个间隙突然变窄甚至重叠
- 加了
padding或margin后整体错位
更可靠的均分方案：用 gap + justify-content: center
现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+）已全面支持 gap，它是 Flex 布局中真正控制“项间+首尾”统一间距的属性。配合 justify-content: center，能实现视觉上完全均分的效果。
实操要点：
- 去掉
justify-content: space-between - 设
display: flex和justify-content: center（让整体居中，避免首尾压边） - 用
gap: 1rem统一控制所有相邻项之间的距离（包括首项前、末项后 —— 不，等等，gap不管首尾外边距！但配合padding就行） - 给容器加
padding: 0 1rem，就能让首项前、末项后也等于gap值
示例代码：
.container {
display: flex;
justify-content: center;
gap: 1rem;
padding: 0 1rem;
}
<p>.item {
flex: 0 0 auto; /<em> 防止缩放影响宽度 </em>/
}</p>
兼容老浏览器？用 margin 手动模拟
IE 或旧版 Safari 不支持 gap，此时必须放弃 space-between，改用子项自己控制外边距。关键点是：只给「非末项」加右 margin，再用负 margin 抵消容器的外溢。
操作步骤：
- 容器设
display: flex和margin: 0 -0.5rem（负边距抵消子项的右边距） - 每个子项设
margin-right: 1rem - 最后一项用
:last-child { margin-right: 0; } - 为防换行错乱，建议加
flex-wrap: nowrap
注意：这种写法对动态增删子项不友好，且 margin 值需和容器 padding 协同计算，稍有不慎就多出半像素偏差。
别忽略 flex-basis 和 min-width 的干扰
即使用了 gap，如果子项设置了 flex-basis: 100% 或过大的 min-width，它们会撑满容器，导致 gap 失效或换行。均分的前提是子项能“让出空间”。
检查项宽是否合理：
- 避免直接写
width: 33.33%—— 小数精度会让总宽超 100% - 用
flex: 1配合min-width: 0更安全（允许压缩） - 若需固定数量均分（如 3 列），可用
flex: 0 0 calc((100% - 2 * 1rem) / 3)，其中1rem是gap
复杂点在于：gap、padding、border、box-sizing 全部叠加影响最终像素位置，调试时建议打开浏览器的盒模型高亮，逐层核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
