flex-basis是flex布局空间分配的“起点”，width仅作fallback；两者共存时flex-basis一定生效、width被忽略，这是flex规范设计逻辑而非bug。
flex-basis 是 flex 布局空间分配的“起点”，width 只是 fallback；两者同时存在时，flex-basis 一定生效，width 被忽略——这不是 bug，是 flex 布局设计逻辑本身。
flex-basis 决定主轴初始尺寸，不是“宽度”而是“入场值”
浏览器计算 flex 项目主轴尺寸时，有明确顺序：flex-basis → width（仅当 flex-basis: auto 或未声明时才回退）。它不绑定 width 或 height 属性名，而取决于 flex-direction：
-
flex-direction: row（默认）→flex-basis控制水平方向尺寸，覆盖width -
flex-direction: column→flex-basis控制垂直方向尺寸，覆盖height，此时width变成交叉轴约束，不影响主轴分配
常见错误：在响应式中切换 flex-direction 却保留 flex-basis: 200px，结果在 column 下变成“固定高度 200px”，而父容器没设 height，导致内容被裁剪或溢出。
width 在 flex 容器里只是被动 fallback，行为不可控
width 是通用盒模型属性，不参与 flex 空间分配流程。它只在两种情况下起作用：
- 未设
flex-basis，且flex-basis为auto时，作为内容尺寸的 fallback（但受内容撑开影响，比如长英文不换行） - 配合
min-width/max-width间接限制flex-basis（因为min-width和max-width会截断flex-basis的最终计算值）
典型陷阱：width: 300px; flex-basis: 150px; → 实际尺寸是 150px，width 完全无效；更隐蔽的是 width: 100px; flex-basis: auto; → 若内容宽度是 220px，最终仍为 220px，width 形同虚设。
flex-basis 的值不是上限也不是固定值，而是伸缩链第一环
flex-basis 设的是“分配剩余空间前的基准”，不是最大/最小宽度。它和 flex-grow/flex-shrink 构成完整伸缩链：
-
flex-basis: 100px;+ 内容撑到 250px → 最终宽度是 250px（内容优先） -
flex-basis: 100px;+min-width: 120px;→ 最终至少 120px，哪怕内容为空 -
flex-basis: 0;（如flex: 1）→ 从 0 开始按比例拉伸，width完全失效
容易被忽略的点：flex-basis: auto 在 iOS 12–13 嵌套 flex 中可能退化为纯内容宽度，不如显式写 flex-basis: 100% 或具体值稳定；微信 X5 内核对 flex-basis: 0 处理激进，必须搭配 min-width: 0 防止塌缩不可见。
响应式断点中改 flex-basis 比改 width 更可预测
在媒体查询里切换尺寸时，flex-basis 直接触发 flex 布局再分配；width 只是静态值，可能被 flex-shrink 压缩、被内容撑开、或在旧 WebView（如 Android 4.4–5.1）中解析不准：
-
@media (max-width: 768px) { .item { flex-basis: 100%; } }→ 项目占满整行，flex-grow自动失效，行为确定 - 同样断点下写
width: 100%→ 若父容器flex-wrap: wrap且空间不足，项目可能被压缩成窄条，结果不可预期 - Android 4.4–5.1 WebView 对
flex-basis: 50%解析不准，但对flex-basis: 120px或flex-basis: 25vw支持稳定
真正复杂的地方在于：flex-basis 不是“你想让它多宽它就多宽”，它是伸缩链的起点——设了却不配 min-width，窄屏下可能直接塌成一条线；设了又没考虑 flex-direction 切换，垂直主轴下 px 值就变成高度基准，而你忘了父容器没设 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
