<p>最稳的写法是 flex: 0 0 calc(33.333% - gap)，因 flex-basis 会覆盖 width，而 flex: 1 易受内容影响导致不等宽；需配合 display: flex、flex-wrap: wrap、box-sizing: border-box，并避免混用 width 与 flex。</p>
flex: 1 1 calc(33.333% - gap) 是最稳的写法
直接写 width: 33.333% 在 flex 容器里大概率失效，因为 flex-basis 会覆盖它；而只写 flex: 1 又容易被内容撑开或压缩。真正可控的方式是锁定每个子项的基础宽度，并预留 gap 空间。
关键点在于：用 flex: 0 0 calc(33.333% - 5.333px)（假设 gap: 8px），其中 0 0 表示不放大也不缩小，calc() 算出单列净宽。
- 父容器必须设
display: flex和flex-wrap: wrap - 子项必须加
box-sizing: border-box，否则 padding/border 会让实际宽度超限 - 如果用
gap，就别再给子项设margin，否则间隙加倍 - 子项数量不是 3 的倍数时，最后一行会自动左对齐，这是正常行为，不是 bug
为什么不能只靠 flex: 1 实现等宽？
flex: 1 是 flex-grow: 1 的简写，它会让所有子项“争抢”剩余空间，但前提是它们初始宽度一致。一旦某个子项内容更长、字体更大或有内边距，它的基础尺寸就变大，flex-grow 就会按比例分配——结果就是视觉上不等宽。
比如两个 div，一个含文字“短”，一个含“这是一段很长的文字”，即使都设了 flex: 1，后者仍会更宽。
立即学习“前端免费学习笔记（深入）”；
- 想强制等宽，就得先消灭尺寸差异源：统一
font-size、padding、border - 更可靠的做法是绕过 grow/shrink，直接用
flex: 0 0 calc(...)固定基宽 -
flex: 1 1 auto在等分场景下反而更容易失控
响应式三列改两列，只需改一个值
Flex 布局的优势就体现在这里：不需要媒体查询重写整套规则，只要动态调整子项的 flex-basis 即可。
例如在移动端改成两列，只需把子项的 flex-basis 从 calc(33.333% - 5.333px) 改成 calc(50% - 4px)（对应 gap: 8px）。
- 不用改 HTML 结构，也不用增删 class
- 配合
@media写法简洁：@media (max-width: 768px) { .item { flex-basis: calc(50% - 4px); } } - 注意：如果用了
gap，记得在不同断点里保持 gap 值一致，否则 calc 计算会错位
常见错误：子项 width 和 flex 同时设置
很多人会这样写：width: 33.333%; flex: 1;。这时候浏览器优先采用 flex-basis（默认为 auto），而 width 被忽略——最终效果可能完全不符合预期。
更隐蔽的问题是：当子项有 min-width 且值大于 calc 结果时，它会强行撑开，破坏三列结构。
- 要么纯 flex 控制：
flex: 0 0 calc(...)，删掉所有width - 要么纯 width 控制：
width: calc(...)+flex: none，但失去 flex 的弹性优势 - 绝对不要混用
width和flex，除非你清楚flex-basis的覆盖逻辑
实际项目里最容易被忽略的，是 box-sizing: border-box 这一行。它不显眼，但缺了就会让 padding 和 border 悄悄吃掉你精心计算的 calc 宽度，导致换行错乱——这种问题往往要花半小时才定位到。
