flex-basis是主轴尺寸的真正控制者，width在flex容器中多数失效；仅当flex-basis: auto且flex-shrink: 0、flex-grow: 0、内容不撑开时，width才可能作为fallback生效。

flex-basis 不能“替代”width来解决冲突——它本来就是主轴尺寸的真正控制者，而width在 flex 容器里多数时候根本没机会生效。

flex-basis 非 auto 时 width 完全不参与计算

浏览器在 Flex 布局中只看 flex-basis（除非它是 auto），width 属性会被跳过，连解析都省了。你在 DevTools 的 Styles 面板里看到 width: 200px，Computed 面板里它对 layout 没任何影响。

• width: 200px; flex: 1; → 实际等价于 flex: 1 1 0%，flex-basis: 0% 生效，width 彻底失效
• width: 150px; flex-basis: 120px; → 最终基准尺寸就是 120px，width 被忽略
• width: 100%; flex-basis: 100%; → 父宽 400px，子项初始占满 400px；再加 padding 或 border 就必然溢出

想让 width “看起来生效”，必须切断 flex-shrink 并设 flex-basis: auto

只有当 flex-basis 是 auto（默认值）时，width 才作为 fallback 参与计算，但前提是内容不撑开它：

• 显式写 flex-basis: auto（或不写，保持默认）
• 设 flex-shrink: 0，否则内容少时仍可能被压缩
• 确保 flex-grow: 0，否则剩余空间会拉伸它
• 内容本身不能比 width 更宽（比如长 URL、未折行文本）

所以真正可控的写法是：flex: 0 0 auto; + width: 200px; —— 这里 width 才有机会成为最终尺寸依据。

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

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

下载

IE10/11 中 flex-basis 被完全忽略，width 是唯一兜底手段

IE10 和 IE11 渲染引擎压根不读取 flex-basis，哪怕你写了 flex-basis: 200px，它也当没看见。此时 width 反而成了实际生效的尺寸来源，但仅限于特定组合：

• 必须配合 flex: 0 0 auto 或 flex: none，否则 flex: 1 会让 IE 回退到 width: auto
• 要写两套：-ms-flex: 0 0 200px; + flex: 0 0 200px;，缺一不可
• 额外加 width: 200px; 是保险绳——只在 -ms-flex 解析异常时起作用

flex-direction 改变时，flex-basis 控制的维度跟着变

flex-basis 不固定管 width，而是根据主轴方向切换：水平主轴（row）时它接管 width，垂直主轴（column）时它接管 height。这点极易被忽略：

• flex-direction: row; + flex-basis: 200px; → 控制宽度
• flex-direction: column; + flex-basis: 200px; → 控制高度，此时 width: 200px 只约束交叉轴，不影响主轴分配
• 响应式中用媒体查询切 flex-direction 却没同步改 flex-basis 单位（比如还留着 flex-basis: 30%），可能导致高度塌缩或溢出

最危险的点在于：你以为在调宽度，其实已在悄悄改高度——尤其当父容器没设 height 时，flex-basis: 30% 在 column 下会变成 0。

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