flex-basis生效，width被跳过；因flex-basis是主轴“入场值”，width仅在flex-basis: auto时作为内容后的fallback，二者非覆盖而是计算流程先后关系。
flex-basis 不是 width 的增强版，它是 Flex 布局中主轴尺寸的“入场值”；width 在 flex 容器里只是 fallback，且只在 flex-basis: auto 时才可能被读取——不是覆盖关系，而是计算流程中的先后层级。
flex-basis 和 width 同时写，哪个生效？
只要 flex-basis 不是 auto（比如设成 200px、0、50%），浏览器就跳过 width，连解析都不做。这不是“谁赢了”，而是布局引擎根本不会走到读取 width 那一步。
-
width: 300px; flex-basis: 150px;→ 实际主轴尺寸就是150px，width形同注释 -
flex: 1;→ 等价于flex: 1 1 0%，width完全无效 -
flex-basis: auto;是唯一让width有机会介入的场景，但它只是第三顺位 fallback（第一是内容固有宽，第二才是width）
为什么 flex-direction 改变后，flex-basis 突然“管高度”了？
因为 flex-basis 管的是主轴方向，不绑定 width 或 height 这个名字。浏览器只看父容器的 flex-direction：
-
flex-direction: row（默认）→ 主轴水平 →flex-basis控制水平尺寸，覆盖width -
flex-direction: column→ 主轴垂直 →flex-basis控制垂直尺寸，覆盖height，此时width变成交叉轴约束，不影响空间分配 - 响应式中切到
column却还留着flex-basis: 200px，结果项目高度被锁死为 200px，而父容器没设height，内容就容易溢出或塌缩
想锁死尺寸，该用 width 还是 flex-basis？
单独靠 width 在 flex 容器里不可靠；靠 flex-basis 又容易忽略伸缩行为。真正稳定的做法是用 flex 缩写一次性控制三要素：
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 200px→ 不增长、不收缩、基准尺寸 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） -
flex: 0 1 200px→ 允许压缩但禁止拉伸，适合响应式收窄 -
width: 200px; flex: none;也能生效，但flex: none等价于flex: 0 0 auto，仍依赖内容宽度，不如显式写flex-basis精确
百分比 flex-basis 在哪些地方会出问题？
flex-basis: 50% 看似直观，但在旧环境里行为不稳定：
- Android WebView 4.4–5.1 对百分比解析不准，常导致尺寸错乱
-
flex-basis: 50%是相对于父容器主轴尺寸计算的“起点”，不是最大宽度；若加padding或border，很容易撑破容器 - 更稳妥的选择：
flex-basis: 200px或flex-basis: 25vw，这些值在所有主流环境都解析一致
最容易被忽略的一点：flex-basis 不是“最终宽度”，它只是空间分配的第一步；后续是否被拉伸（flex-grow）、压缩（flex-shrink）、截断（min-width）才决定真实尺寸——只设 flex-basis 而不约束伸缩性，等于只画了起点线，没管终点在哪。
