flex-basis 优先于 width/height 生效，主轴水平时覆盖 width，垂直时覆盖 height；flex: 1 隐式设 flex-basis: 0，使 width 失效；flex-basis: auto 时 width 才可能起作用；column 方向下 flex-basis 控制高度。
flex-basis 在 flex 项目中优先于 width 生效
当一个元素是 display: flex 容器的直接子项（即 flex 项目）时，flex-basis 会覆盖 width（在主轴为水平方向时）或 height（主轴为垂直时）来决定其初始主轴尺寸。这不是 CSS 优先级（specificity）问题，而是 Flex 布局算法的计算顺序决定的：浏览器先读取 flex-basis，仅当它为 auto 且没有其他约束时，才退回到 width 或 height。
flex-basis: auto 时 width 才可能起作用
flex-basis: auto 是默认值，但它不等于“忽略 width”，而是触发一套查找逻辑：
- 如果元素有明确的
width（非auto），且主轴是水平方向，则使用该width作为基础尺寸 - 如果
width为auto，则尝试从内容（content）推导尺寸（即所谓“内在尺寸”） - 若同时设置了
min-width/max-width，它们会参与后续的伸缩限制，但不改变flex-basis的初始取值来源
注意：flex-basis: 0 和 flex-basis: 0px 效果不同——前者等价于 0px，后者明确为零宽度；而 flex-basis: 0% 依赖父容器宽度，若父宽未定（如 width: auto），结果可能为 0px 或计算异常。
flex: 1 等简写会隐式重置 flex-basis
flex 是 flex-grow、flex-shrink、flex-basis 的简写，省略第三项时默认为 0：
.item { flex: 1; } /* 等价于 flex: 1 1 0; → flex-basis: 0 */
.item { flex: 1 1 auto; } /* 显式保留 auto，width 才有机会生效 */
常见误操作是写 flex: 1 后还期望 width: 200px 控制大小，实际此时 flex-basis 已被设为 0，width 完全被忽略。调试时可检查 computed styles 中 flex-basis 的最终解析值，而非只看声明。
主轴方向切换时 width/height 与 flex-basis 的对应关系会变
当 flex-direction 为 column 或 column-reverse 时，主轴变为垂直方向，此时起作用的是 flex-basis 对应的 **高度维度**：
-
flex-basis: 100px→ 按 100px 设置初始高度 -
width属性此时影响的是交叉轴（即水平方向），不再参与主轴空间分配 - 若仍想用宽度控制尺寸，需配合
flex-direction: column+flex-basis: 100%（前提是父容器有明确高度）
这个映射关系容易被忽略，尤其在响应式中动态切换 flex-direction 时，flex-basis 的单位（px vs %）和参照系是否稳定，直接决定布局是否断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
