ios safari对替换元素强制min-width: min-content且忽略min-width: 0，需设min-width: 1px、flex: 1 0 0、box-sizing: border-box，并避免white-space: nowrap及父容器宽度不确定。

flex: 1 在 iOS 上为啥不等宽

因为 iOS Safari（尤其 15+）对 <button></button>、<input>、<img> 等替换元素强制施加了 min-width: min-content，且会忽略你写的 min-width: 0。它不是 flex 失效，而是浏览器在“保护”可点击性时过度干预了弹性计算。

必须加 min-width: 1px 而不是 min-width: 0

实测中，min-width: 0 在 iOS Safari 中常被静默丢弃；换成 min-width: 1px 才能绕过它的最小宽度保护机制，同时视觉上几乎无感。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 所有参与等分的子项都要统一加：min-width: 1px
• 搭配 flex: 1 0 0（即 flex-grow: 1、flex-shrink: 0、flex-basis: 0）
• 必须设 box-sizing: border-box，否则 padding/border 会额外撑开宽度

别让 white-space: nowrap 暗中破坏起点

加了 white-space: nowrap 的按钮或文本块，会因内容无法换行而撑大自身初始尺寸，导致 flex-basis: 0 形同虚设——其他项从 0 开始均分，它却从 200px 起步，自然更宽。

• 若需防换行，优先用 text-overflow: ellipsis + overflow: hidden + width 控制（但注意 width 会覆盖 flex-basis）
• 更稳妥的做法是允许换行，靠 padding 和 line-height 控制垂直居中，视觉更一致

检查父容器是否“空间模糊”

如果父容器本身宽度不稳定（比如嵌套在 position: fixed 或未设 max-width 的 modal 中），Flex 子项的“剩余空间”就无法确定，flex-grow 就不会触发，整个分配逻辑失效。

• 临时加 border: 1px solid red 查看每个子项的 computed flex-basis 和 “Used width”
• 确认父容器有明确宽度：要么设 width / max-width，要么确保其父级已约束流式宽度
• 避免给子项写 width、min-width（除非是固定宽项）、max-width —— 它们会直接干扰 flex 计算

真正卡住的往往不是 flex 写法本身，而是 iOS 对替换元素的隐式限制 + 父容器空间不确定 + 子项内联样式干扰这三者叠加。逐项排除比反复调 flex-grow 更有效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！