等宽三栏用flex: 0 0 calc(33.333% - gap)最稳，因它绕过flex-grow依赖初始宽度的机制，直接锁定每项基准宽度并预留gap空间；而flex: 1本质是flex-grow: 1，受内容长度、padding、border等影响导致初始宽度不一致，分配后视觉不等宽。
等宽三栏用 flex: 0 0 calc(33.333% - gap) 最稳，不是 flex: 1，也不是 width: 33.333%。
为什么 flex: 1 不能保证等宽
它本质是 flex-grow: 1，依赖所有子项初始宽度一致才“公平分配”。但只要某个子项文字更长、padding 更大、字体更大或有 border，它的基础尺寸就变大，flex-grow 就会按比例多分——结果就是视觉上明显不等宽。
- 比如两个
<div>，一个内容是“短”，另一个是“这是一段很长的文字”，都设 <code>flex: 1，后者一定更宽 -
flex: 1 1 auto或flex: 1 1 0%同样不可控，因为flex-basis: auto会读取内容撑开后的宽度，0%在某些旧版 Safari 下还可能触发异常压缩 - 想靠
flex-grow“强制平均”，就得先统一所有子项的font-size、padding、border、min-width—— 实际项目里几乎做不到 - 父容器设
display: flex和flex-wrap: wrap（否则单行溢出时不会折行） - 子项设
box-sizing: border-box（否则padding和border会让实际宽度超限） - 子项用
flex: 0 0 calc(33.333% - 5.333px)（假设gap: 8px；计算方式：8px / 2 = 4px左右各占一半，但三列只有两处间隙，所以每列减8px / 3 ≈ 2.667px？不对——正确是：总 gap 占2 * gap，三列均分后每列需减2 * gap / 3；但更稳妥写法是直接calc(33.333% - (2 * gap / 3))，或更常用且易读的calc(33.333% - 5.333px)对应gap: 8px） - 别在子项上再设
margin，否则和gap叠加导致间隙翻倍 - 如果子项有
min-width且值大于calc()结果，它会强行撑开，破坏三列结构 - 移动端改两列：
.item { flex-basis: calc(50% - 4px); }（对应同个gap: 8px） - 小屏改单列：
.item { flex-basis: 100%; } - 关键：不同断点里保持
gap值一致，否则calc()计算会错位 - 媒体查询示例：
@media (max-width: 768px) { .item { flex-basis: calc(50% - 4px); } } -
flex-basis会覆盖width，这是规范行为，不是 bug - 更隐蔽的是：子项若含图片、
input或长单词，又没设min-width: 0，可能触发 flex 布局崩溃（文字溢出撑破容器） - 解决办法：删掉所有
width，只靠flex控制；对内部长文本加word-break: break-word和min-width: 0
flex: 0 0 calc() 怎么写才生效
核心是绕过伸缩逻辑，直接锁定每个子项的基准宽度，并预留 gap 空间。必须同时满足以下条件：
响应式改列数只需改一个值
Flex 的优势就在这儿：不用改 HTML，也不用增删 class，只动一行 CSS。
常见错误：混用 width 和 flex
很多人写：width: 33.333%; flex: 1;。这时浏览器优先采用 flex-basis（默认 auto），width 被忽略——效果完全不可预测。
真正可控的等宽，靠的是消灭变量——不是让浏览器“尽量平均”，而是告诉它“每个就是这么多”。calc() 里的数值一旦算错、gap 没对齐、box-sizing 忘了设，三列就立刻失衡。这些细节不在表面，但决定成败。
