怎样用CSS Flex布局实现等宽三栏页面？

<p>等宽三栏用flex: 0 0 calc(33.333% - gap)最稳，因它绕过flex-grow依赖初始宽度的机制，直接锁定每项基准宽度并预留gap空间；而flex: 1本质是flex-grow: 1，受内容长度、padding、border等影响导致初始宽度不一致，分配后视觉不等宽。</p>

等宽三栏用 flex: 0 0 calc(33.333% - gap) 最稳，不是 flex: 1，也不是 width: 33.333%。

为什么 flex: 1 不能保证等宽

它本质是 flex-grow: 1，依赖所有子项初始宽度一致才“公平分配”。但只要某个子项文字更长、padding 更大、字体更大或有 border，它的基础尺寸就变大，flex-grow 就会按比例多分——结果就是视觉上明显不等宽。

1. 比如两个 <div>，一个内容是“短”，另一个是“这是一段很长的文字”，都设 flex: 1，后者一定更宽
2. flex: 1 1 auto 或 flex: 1 1 0% 同样不可控，因为 flex-basis: auto 会读取内容撑开后的宽度，0% 在某些旧版 Safari 下还可能触发异常压缩
3. 想靠 flex-grow “强制平均”，就得先统一所有子项的 font-size、padding、border、min-width —— 实际项目里几乎做不到

flex: 0 0 calc() 怎么写才生效

核心是绕过伸缩逻辑，直接锁定每个子项的基准宽度，并预留 gap 空间。必须同时满足以下条件：

1. 父容器设 display: flex 和 flex-wrap: wrap（否则单行溢出时不会折行）
2. 子项设 box-sizing: border-box（否则 padding 和 border 会让实际宽度超限）
3. 子项用 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）
4. 别在子项上再设 margin，否则和 gap 叠加导致间隙翻倍
5. 如果子项有 min-width 且值大于 calc() 结果，它会强行撑开，破坏三列结构

响应式改列数只需改一个值

Flex 的优势就在这儿：不用改 HTML，也不用增删 class，只动一行 CSS。

1. 移动端改两列：.item { flex-basis: calc(50% - 4px); }（对应同个 gap: 8px）
2. 小屏改单列：.item { flex-basis: 100%; }
3. 关键：不同断点里保持 gap 值一致，否则 calc() 计算会错位
4. 媒体查询示例：@media (max-width: 768px) { .item { flex-basis: calc(50% - 4px); } }

常见错误：混用 width 和 flex

很多人写：width: 33.333%; flex: 1;。这时浏览器优先采用 flex-basis（默认 auto），width 被忽略——效果完全不可预测。

1. flex-basis 会覆盖 width，这是规范行为，不是 bug
2. 更隐蔽的是：子项若含图片、input 或长单词，又没设 min-width: 0，可能触发 flex 布局崩溃（文字溢出撑破容器）
3. 解决办法：删掉所有 width，只靠 flex 控制；对内部长文本加 word-break: break-word 和 min-width: 0

真正可控的等宽，靠的是消灭变量——不是让浏览器“尽量平均”，而是告诉它“每个就是这么多”。calc() 里的数值一旦算错、gap 没对齐、box-sizing 忘了设，三列就立刻失衡。这些细节不在表面，但决定成败。