flex子项加padding后“不等宽”是因box-sizing: content-box导致padding额外叠加，必须显式设box-sizing: border-box并验证生效，配合min-width: 0和gap替代margin才能实现真等宽。

Flex子项加了padding后看起来“不等宽”，不是视觉错觉，而是box-sizing: content-box在暗中叠加尺寸——必须用box-sizing: border-box + min-width: 0协同控制，否则flex分配逻辑和盒模型会打架。

为什么padding会让Flex子项“不等宽”

你写flex: 1，浏览器按“内容区宽度”分配空间；但子项又加了padding: 12px，实际渲染宽度 = 分配到的内容宽 + 24px。如果某些子项内容更长、或含<input>这类有UA默认min-width的元素，它们的“基础尺寸”就天然不一致，flex再怎么均分也盖不住这个差值。

常见翻车点：

• 子项里混用了<button></button>和<div>：iOS Safari会给<code><button></button>强加min-width: min-content，无视min-width: 0
• 某个子项写了width: 100%，另一个没写：前者按父容器内容宽算，后者按自身内容宽算，起点就不一样
• 第三方组件（如.ant-input）覆盖了box-sizing，DevTools「Computed」里看到的不是border-box

必须显式设置box-sizing: border-box并验证生效

box-sizing: border-box不是“开了就行”，它得真正在子项上生效，且覆盖所有可能干扰的样式源。

实操建议：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 别只靠全局重置* { box-sizing: border-box; }——Ant Design、Element Plus等UI库常显式设box-sizing: content-box来保兼容
• 对关键子项单独加固：.flex-item { box-sizing: border-box; padding: 12px; }
• 务必打开DevTools → 「Computed」面板，查box-sizing值是否为border-box，不能只看「Styles」里有没有那行代码
• 若子项内还有嵌套Flex（比如.flex-item > .inner-flex），它的子项也得同样处理

flex: 1必须搭配min-width: 0才能真正均分

即使box-sizing已生效，flex: 1子项仍可能因min-width: auto锁死底线——尤其是含文本、<img>或<input>时，浏览器会按内容固有宽度设最小值，导致“该缩不缩”，破坏等宽效果。

关键动作：

• 横向Flex（flex-direction: row）下，给每个flex: 1子项加min-width: 0
• <input>要双重设：.flex-item { min-width: 0; } .flex-item input { min-width: 1px; }（iOS Safari绕过min-width: 0保护机制）
• 避免混用width和flex-basis：比如flex: 1; width: 50%;会冲突，优先用flex: 1 1 0明确基准

间隙必须用gap，别用margin

margin会让子项总宽额外增加，而gap由容器统一控制，不参与子项自身尺寸计算——这是实现真·等宽的底层前提。

正确做法：

• 给Flex容器加gap: 12px，所有子项自动获得一致间隙
• 旧版Safari/IE需兼容时，用margin-left兜底：.flex-item:not(:first-child) { margin-left: 12px; }，但要同步给容器加margin-left: -12px抵消首项偏移
• 绝对禁止子项同时写padding和margin：比如父容器padding: 16px，子项又margin: 8px，视觉间距变成24px，但总占用是32px，极易误判

最易被忽略的是min-width行为差异：它在box-sizing: border-box下依然按“边框盒总宽”计算，但<button></button>、<select></select>等表单控件在iOS Safari中会偷偷绕过它——这时候min-width: 1px比0更可靠。