要实现每行固定个数，需用 min-width + flex: 0 1 0 锁定换行锚点，禁用内容撑宽干扰；配合 flex-wrap: wrap、justify-content: flex-start 和 gap 控制间距，避免 width 或 flex-basis 百分比导致的计算误差。
Flex 布局本身不提供“每行固定个数”的语义，所谓“数量不固定”，其实是换行逻辑未被正确约束导致的视觉漂移——不是 Flex 不够用，而是你没给它明确的换行锚点。
为什么 flex-wrap: wrap 换行后每行个数总在变？
根本原因在于浏览器按 flex-basis + 容器宽度实时计算换行时机，而默认行为下子项宽度由内容撑开（flex-basis: auto），文字长度、图标有无、内边距差异都会让实际宽度浮动。哪怕写了 width: 25%，一旦内容超长，min-width: auto 就会阻止收缩，直接顶破布局。
-
flex-grow: 1单独使用 =flex: 1 1 auto，那个auto是罪魁祸首 - 没设
min-width，按钮/卡片在窄屏下可能宽于容器一半，强行单列 -
gap和margin混用，导致宽度计算偏差，换行点偏移
用 min-width + flex: 0 1 0 实现稳定换行锚点
要让“每行最多 N 个”可预期，就得把换行触发条件从“内容宽度”切换到“最小宽度阈值”。关键不是拉伸，而是锁定基础尺寸。
- 给子项设
min-width: 160px（根据设计稿调整），这是换行的硬性锚点 - 用
flex: 0 1 0替代flex: 1：禁用flex-basis初始值，避免内容撑宽干扰 - 容器必须声明
flex-wrap: wrap，且不能有justify-content: space-between干扰末行对齐 - 间距统一用
gap: 8px，别用margin，否则和min-width叠加后宽度失控
最后一行靠左对齐且间距均匀的写法
justify-content: space-between 在末行只有 1–2 个元素时会把它们拉开，这不是 bug，是它的设计逻辑。你要的是“视觉整齐”，就得放弃这个值。
立即学习“前端免费学习笔记（深入）”；
- 改用
justify-content: flex-start，所有行都左对齐，再靠gap控制间距 - 如果仍需类似
space-between的呼吸感，改用display: grid：grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) - 旧浏览器 fallback：用伪元素模拟 gap ——
.container { margin: -4px; }+.item { padding: 4px; } - 切记不要给子项设
width: calc(33.33% - 8px)类计算，响应式下容器宽度变化时它立刻失效
最常被忽略的一点：所谓“固定每行个数”，从来不是靠 JS 数元素或 CSS 算 nth-child，而是靠 min-width 和容器宽度的比值触发换行——这个比值稳定了，每行数量才真正可控。一旦你开始写 flex-basis: 33.333%，就已经在用百分比四舍五入赌运气了。
