flex: 1 并不天然保证等宽——其本质是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，但内容固有尺寸、min-width、white-space 等会干扰分配逻辑；唯有显式设 flex-basis: 0 并清除盒模型干扰，才能实现严格均分。
`flex: 1` 并不天然保证等宽——其本质是 `flex-grow: 1; flex-shrink: 1; flex-basis: 0%`，但内容固有尺寸、`min-width`、`white-space` 等会干扰分配逻辑；唯有显式设 `flex-basis: 0` 并清除盒模型干扰，才能实现严格均分。
在你提供的示例中，三列看似都应用了 .hijo { flex: 1 }，却未呈现视觉等宽，根本原因并非 Flex 失效，而是 flex: 1 的默认行为被浏览器隐式规则和元素类型差异悄然覆盖。尤其当子项包含 <button> 这类替换元素（replaced element）时，问题尤为典型。
? 为什么 flex: 1 没让三列等宽？
flex: 1 是 flex: 1 1 0% 的简写（部分引擎解析为 0 更稳妥），它本意是：
- 所有子项从「0 宽度起点」出发；
- 按 flex-grow: 1 均分父容器剩余空间。
但现实干扰项远超预期：
| 干扰源 | 具体表现 | 影响机制 |
|---|---|---|
| <button> 自带 min-width: min-content | 文字较长时按钮拒绝压缩，强行撑开 | flex-shrink: 1 失效，实际宽度 > flex-basis + grow 计算值 |
| 嵌套结构导致 flex 作用层级错位 | <div class="hijo"><button>...</button></div> 中，flex: 1 作用于 div，button 仅继承其宽度，但自身仍按内容伸缩 | 真正参与 flex 分配的是外层 div，而非内部 button |
| 缺失 min-width: 0 | 替换元素（<button>、<img>、<input>）默认最小宽度由内容决定 | 必须显式重置 min-width: 0（iOS Safari 可降级为 1px）才能释放压缩能力 |
| 未统一 box-sizing 行为 | 即使全局设 * { box-sizing: border-box }，某些浏览器对 <button> 的默认解析仍可能为 content-box | padding 和 border 被额外计入总宽，导致溢出或换行 |
✅ 验证方式：打开 Chrome DevTools → 选中各子元素 → 查看 Computed 标签页中的 width、min-width 和 flex-basis，你会看到：
- <button class="hijo"> 的 min-width 显示为 auto 或 min-content；
- 外层 <div class="hijo"> 的 flex-basis 为 0%，但内部 <button> 无视该约束。
✅ 正确写法：四步强制等宽
.padre {
display: flex;
width: 200px;
background-color: red;
/* 推荐使用 gap 替代 margin 控制间距 */
gap: 4px; /* 不影响 flex 分配逻辑 */
}
.hijo {
/* 关键：显式声明 flex-basis: 0，消除内容初始尺寸干扰 */
flex: 1 1 0;
/* 强制允许压缩（尤其对 button/img/input 等） */
min-width: 0;
/* 确保 padding/border 不撑出容器 */
box-sizing: border-box;
/* 防止长文本/URL 撑开 */
white-space: normal; /* 或 text-overflow: ellipsis + overflow: hidden */
}<div class="padre">
<div class="hijo">
<button>child 1</button>
</div>
<button class="hijo">child 2</button>
<div class="hijo">child 3</div>
</div>✅ 效果：三列将严格均分 200px（每列 ≈ 65.33px），无论内部是 <button>、<div> 还是纯文本。
⚠️ 特别注意：按钮的兼容性陷阱
针对 <button> 元素，还需补充两条关键声明：
.hijo button {
/* 覆盖浏览器默认 min-width */
min-width: 0;
/* iOS Safari 兼容方案（若 0 不生效） */
/* min-width: 1px; */
/* 避免文字撑开后换行挤压 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}? 进阶：比例分配与固定+自适应混合布局
-
2:1:1 三栏比例
.col-main { flex: 2 1 0; } .col-side { flex: 1 1 0; } -
左侧固定 200px + 中右自适应
.fixed { flex: 0 0 200px; } .fluid { flex: 1 1 0; }
? 总结
flex: 1 是快捷入口，但不是“魔法开关”。真正可控的等宽布局需同时满足：
- ✅ flex: 1 1 0（起点归零）
- ✅ min-width: 0（破除内容最小宽度枷锁）
- ✅ box-sizing: border-box（统一尺寸计算基准）
- ✅ gap 替代 margin（避免干扰分配）
- ✅ 对替换元素单独处理（<button>、<img> 等）
忽略任一环节，都可能导致“写了 flex: 1 却不等宽”的经典困境。记住：Flex 的公平分配，始于所有子项站在同一起跑线——而 flex-basis: 0，正是那条起跑线。
