会，flex-basis 优先于 width 生效；当 flex-basis 值不为 auto 时直接覆盖 width，仅在 flex-basis: auto 时 width 才作为回退依据。
flex-basis 和 width 同时设置会互相覆盖吗
会，而且覆盖方式取决于
属性的写法。当显式声明
和
冲突时，浏览器按 CSS Flex 规范优先采用
（除非它为
），而
仅在
时作为 fallback 起作用。
常见错误现象：
写了
，但子项实际宽度是 300px —— 很可能因为
或
覆盖了它
设置了
，又加
，结果在小屏下撑破父容器 ——
等价于
，此时
，
完全不参与计算
关键判断点：
值不是
时，
被忽略（包括百分比、
）
时，才读取
或内容固有尺寸（如图片原始宽、文本自然宽）
和
行为完全不同：前者尊重
，后者直接用
作为基础尺寸
为什么 flex-basis 设成 100% 就容易溢出
因为
是相对于父容器宽度计算的“初始主轴尺寸”，不是“最大允许宽度”。如果父容器宽 400px，一个
的子项就占满 400px；再加 margin/padding/border，立刻超限。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
更麻烦的是：这个 100% 是静态计算值，不随后续 flex-shrink 动态调整 —— 即使你写了
，浏览器也只在“所有子项 flex-basis 总和 > 父容器可用空间”时才触发收缩，而单个 100% 已经卡死整行。
典型溢出组合：
→ 实际最小宽度 = 400px + 20px > 400px，必然溢出
→ 仍溢出，因为收缩比例基于 100%，但 padding 不缩
如何安全地让子项占满父容器宽度
别用
，改用明确的弹性分配逻辑：
想等分？用
（即
），再配
防止文本撑开
想固定宽度但可收缩？用
，而不是
想响应式适配？用
或
（注意 Safari 兼容性）
必须用百分比？写成
显式减去 padding/margin
真正危险的不是
本身，而是它和
、
、
混用时，尺寸计算链断裂——浏览器不会报错，只会默默把元素推出父容器边界。
flexwidthflex-basisflex-basisautowidthflex-basis: autowidth: 200pxflex-basis: 300pxflex: 0 0 300pxflex: 1width: 100%flex: 1flex: 1 1 0flex-basis: 0widthflex-basisautowidth100%flex-basis: autowidthflex: 0 0 autoflex: 0 0 100%width100%flex-basis: 100%flex-basis: 100%flex-shrink: 1.container { width: 400px; display: flex; flex-wrap: wrap; }.item { flex: 0 0 100%; padding: 10px; }.item { flex-basis: 100%; flex-shrink: 1; }flex-basis: 100%flex: 1flex: 1 1 0min-width: 0flex: 0 1 200pxwidth: 200px; flex-shrink: 1flex-basis: max-contentfit-contentflex-basis: calc(100% - 20px)flex-basiswidthpaddingbox-sizing