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 的默认行为被浏览器隐式规则和元素类型差异悄然覆盖。尤其当子项包含 这类替换元素（replaced element）时，问题尤为典型。

? 为什么 flex: 1 没让三列等宽？

flex: 1 是 flex: 1 1 0% 的简写（部分引擎解析为 0 更稳妥），它本意是：

• 所有子项从「0 宽度起点」出发；
• 按 flex-grow: 1 均分父容器剩余空间。

但现实干扰项远超预期：

干扰源	具体表现	影响机制
自带 min-width: min-content	文字较长时按钮拒绝压缩，强行撑开	flex-shrink: 1 失效，实际宽度 > flex-basis + grow 计算值
嵌套结构导致 flex 作用层级错位	... 中，flex: 1 作用于 div，button 仅继承其宽度，但自身仍按内容伸缩	真正参与 flex 分配的是外层 div，而非内部 button
缺失 min-width: 0	替换元素（、、）默认最小宽度由内容决定	必须显式重置 min-width: 0（iOS Safari 可降级为 1px）才能释放压缩能力
未统一 box-sizing 行为	即使全局设 * { box-sizing: border-box }，某些浏览器对 的默认解析仍可能为 content-box	padding 和 border 被额外计入总宽，导致溢出或换行

✅ 验证方式：打开 Chrome DevTools → 选中各子元素 → 查看 Computed 标签页中的 width、min-width 和 flex-basis，你会看到：

• 的 min-width 显示为 auto 或 min-content；
• 外层
  的 flex-basis 为 0%，但内部 无视该约束。

  ✅ 正确写法：四步强制等宽

  .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），无论内部是

  、

  还是纯文本。

  ⚠️ 特别注意：按钮的兼容性陷阱

  针对

  元素，还需补充两条关键声明：

  

  CSS3旅游画廊悬停放大动画

  一款简约的css3旅游画廊过渡动画效果，鼠标悬停图片放大

  下载

  .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（避免干扰分配）
  • ✅ 对替换元素单独处理（、 等）

  忽略任一环节，都可能导致“写了 flex: 1 却不等宽”的经典困境。记住：Flex 的公平分配，始于所有子项站在同一起跑线——而 flex-basis: 0，正是那条起跑线。