flex: 1 本身不保证视觉等宽——因浏览器默认对 <button> 等替换元素施加 min-width: min-content，且 flex-basis: auto 会受内容尺寸干扰；需统一设 flex: 1 1 0、min-width: 0 和 box-sizing: border-box 才能强制三栏严格均分。
`flex: 1` 本身不保证视觉等宽——因浏览器默认对 `
在实际开发中，许多开发者误以为给三个子元素同时设置 flex: 1 就能实现“绝对等宽”，但当你混用 <button>、<div> 等不同语义化元素时，布局常出现明显偏差：比如示例中直接作为 .hijo 的 <button> 明显比包裹在 <div> 内的按钮更宽。这不是 Flexbox 的 Bug，而是其底层计算逻辑与浏览器默认样式的共同作用结果。
? 根本原因：flex: 1 的真实含义被掩盖
flex: 1 是简写，等价于：
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; /* 或 0 —— 推荐用 0，兼容性更稳 */
关键在于：flex-basis 决定“分配起点”。若为 auto（某些上下文或继承场景），浏览器会先按内容宽度（如按钮文字“child 2”）确定初始尺寸，再分配剩余空间——导致起点不一致，自然结果不等宽。而 <button> 元素在所有主流浏览器中默认拥有 min-width: min-content（即至少撑开到文字完整显示所需最小宽度），这会直接 override flex-basis: 0%，使 flex-shrink: 1 失效。
此外，你当前代码中虽写了 * { box-sizing: border-box; }，但若未显式声明 min-width: 0，<button class="hijo"> 仍将拒绝压缩；而嵌套结构 <div class="hijo"><button>...</button></div> 中，外层 div 确实占了 1/3 宽度，但内部 <button> 仍按自身内容自由伸展——这就是“容器等宽、内容不等宽”的典型错觉。
✅ 正确解法：四步归零，强制对齐
以下是最小完备方案（已通过 Chrome/Firefox/Safari（含 iOS）验证）：
.padre {
display: flex;
width: 200px;
background-color: red;
/* 推荐添加 gap 替代 margin，避免干扰计算 */
gap: 4px;
}
.hijo {
flex: 1 1 0; /* ✅ 显式设 flex-basis: 0 */
min-width: 0; /* ✅ 破除 button/img/input 的 min-content 限制 */
box-sizing: border-box; /* ✅ 确保 padding/border 不撑出容器 */
/* 可选：防文字溢出破坏布局 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}✅ 为什么必须 min-width: 0？
<button>、<input>、<img> 等替换元素默认 min-width: min-content，这是 CSS 规范定义的“内容最小尺寸”。不重置它，flex-shrink 形同虚设。iOS Safari 中若仍有异常，可降级为 min-width: 1px（绕过其渲染保护机制）。
✅ 为什么推荐 flex: 1 1 0 而非 flex: 1？
flex: 1 在部分旧引擎或复杂继承链中可能被解析为 flex: 1 1 auto，尤其当父级存在 flex-direction: column 或 writing-mode 干扰时。显式书写 0 消除歧义，确保所有子项严格从「零主轴尺寸」起跑。
✅ 为什么 gap 比 margin 更安全？
gap 是 Flexbox 原生间隙控制属性，不参与 flex-grow/shrink 计算，不会挤占子项可用空间；而 margin 会增加外边距，导致实际可分配宽度减少，还易引发 margin 合并问题。
? 验证效果（HTML 结构保持不变）
<div class="padre"> <div class="hijo"><button>child 1</button></div> <button class="hijo">child 2</button> <div class="hijo">child 3</div> </div>
此时三列容器宽度将严格为 65.333px（200px ÷ 3 ≈ 66.67px，减去 gap 后均分），且内部 <button> 不再撑破父容器——你可在 Chrome DevTools 的 Layout 面板中直接观测 computed width 值验证。
⚠️ 注意事项总结
- ❌ 避免混用 width 与 flex: 1：width 会覆盖 flex-basis，导致分配失效；
- ❌ 禁用 white-space: nowrap 除非必要：它会锁死内容不可折行，触发 min-content 优先级；
- ✅ 固定宽 + 自适应组合？用 flex: 0 0 80px（固定） + flex: 1 1 0（流体）；
- ✅ 多比例布局？flex: 2 1 0（占 2/3） + flex: 1 1 0（占 1/3）；
- ✅ 响应式增强：配合 min-width: max(200px, 30%) 防窄屏挤压，而非硬写 px。
Flexbox 的强大，在于可控；它的陷阱，在于默认。真正掌握 flex-basis 与 min-width 的博弈关系，才能让三栏——无论内含按钮、图片还是长文本——始终严丝合缝，所见即所得。
