不能用 width 代替 flex-basis，因 width 在 Flex 主轴上不参与计算；flex-basis 才决定主轴尺寸，width 仅影响交叉轴或非 Flex 场景。
不能“改用 width 代替 flex-basis”——width 在 Flex 主轴上根本不会被计算，强行写只会制造幻觉。
flex-basis 失效时直接写 width 是无效操作
你看到 flex-basis 没起作用，就加一行 width: 200px，结果发现还是没变？这不是浏览器 bug，是 CSS 计算流程跳过了它。Flex 子项的主轴尺寸由 flex-basis 决定（无论值是 auto、0% 还是 200px），而 width 只在非 Flex 场景或交叉轴上才参与布局。写了 width 却没效果，说明你还没切断 Flex 的默认分配逻辑。
-
flex: 1或flex: 0 1 auto下，width完全不进入主轴计算链 - 开发者工具里查
Computed → width，大概率显示auto—— 这不是“没生效”，是压根没被读取 - 哪怕父容器宽度明确，
width: 30%和flex-basis: 30%行为也不同：width参照父元素 content box，flex-basis参照父元素主轴尺寸（可能含 padding）
真正该检查的三个关键点
别急着换属性，先确认是不是基础条件没满足：
- 父容器是否真有确定的主轴尺寸？查
Computed → width（row）或height（column），若为auto或极小值，flex-basis: 50%就等于0px - 子项是否意外触发了
min-width: auto隐式撑开？含长单词、图片、white-space: nowrap时，内容固有宽会覆盖flex-basis，此时需加min-width: 0 - 是否混用了
box-sizing: content-box？flex-basis: 200px默认只管内容区，padding/border 会额外加宽；必须统一设box-sizing: border-box
响应式断点中 flex-basis 被忽略的典型错误
媒体查询里只改 width，不碰 flex-basis，断点一到，视觉就崩：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@media (max-width: 768px) { .item { width: 100%; } }→width仍被忽略 - 正确写法：
@media (max-width: 768px) { .item { flex-basis: 100%; flex-shrink: 0; } } - 如果父容器是
display: inline-flex，记得先确保它有width: 100%，否则flex-basis: 100%参照系为空
column 布局下 flex-basis 当成 width 用是方向性错误
把 flex-direction: column 的容器当水平布局用，硬写 flex-basis: 200px 想控宽度？它实际控制的是高度：
-
flex-basis永远作用于主轴：row → 宽度，column → 高度 - 想让子项在 column 容器里占固定宽度，应直接设
width: 200px（此时它是交叉轴尺寸，不受 flex 分配影响） - 但若同时写了
flex: 1，width仍可能被忽略——因为flex: 1启用拉伸，会重算交叉轴对齐，建议显式加align-self: flex-start
最常被跳过的动作：没在父容器上确认尺寸，就去调子项的 flex-basis。它不是独立属性，而是分配链条的第一环——上游没水，下游再怎么拧阀门也没用。
