flex: 1 覆盖 width 是因 flex-basis: 0% 在主轴计算阶段直接取代 width，width 未参与计算；真正控制起点宽度的是 flex-basis，需用 flex: 0 0 200px 等三值语法，且父容器宽度必须明确，同时注意 min-width: auto 的隐式撑开影响。
flex: 1 直接覆盖 width，不是失效而是被跳过
写了 width: 200px 又写 flex: 1，浏览器根本不会读取 width。因为 flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，其中 flex-basis: 0% 在 CSS 计算主轴尺寸阶段就取代了所有显式 width 值——它不是“没起作用”，是压根没进入计算流程。
常见误写：
-
.item { width: 200px; flex: 1; }→width完全无效 -
.item { width: 30%; flex: 1; }→ 百分比失去参照，且仍被flex-basis: 0%覆盖
真正控制起点宽度的是 flex-basis，不是 width。想保留宽度意图，必须用三值语法：flex: 0 0 200px（固定宽）或 flex: 0 0 30%（百分比宽，但依赖父容器有明确宽度）。
父容器宽度没定死，flex-basis 百分比就无参照
flex-basis: 50% 不是“占父容器一半”，而是“占父容器当前计算出的主轴宽度的一半”。如果父容器本身宽度不确定，这个百分比就毫无意义。
典型场景包括：
- 父元素是
display: inline-flex，又没内容撑开或没设width，Computed 中width显示为0px - 父元素浮动、绝对定位，或被
max-width/padding悄悄限制 - 响应式断点中只改子项
width，却没同步更新父容器约束
用开发者工具检查父容器的 Computed → width，确认是不是你预期的值（比如 400px 或 100%）。若显示 auto 或极小值，flex: 1 就只能从 0% 起步，分无可分。
min-width: auto 在暗中撑开子项
即使父容器宽度 OK，子项仍可能宽得离谱——尤其含长单词、图片、white-space: nowrap 时。min-width: auto（Flex 子项默认值）会强制元素至少撑到内容固有宽度，导致 flex-grow 拉不动、flex-shrink 压不下。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
现象举例：
- 一个带
500px图片的子项，flex-basis: 0%也拉不出宽度，起点就是500px - 一长串 URL 或代码块不换行，盒子被撑宽，其他
flex: 1项被迫变窄 - 写了
min-width: 120px，但内容更宽，结果既没守住120px，也没收缩下去
解决办法是显式切断这个默认兜底：min-width: 0（不是全局设，按钮/输入框会变形），再配合 overflow: hidden 或 text-overflow: ellipsis 才能让长文本截断。
过渡动画里 width 无法插值，因起始值是 auto
给 Flex 子项加 transition: width 0.3s 却没动画，大概率是因为 Computed 中 width 显示为 auto——auto → 200px 无法插值。这不是 transition 写错了，而是起始值不可知。
必须同时设置：
-
min-width: 1px（不能用0，部分浏览器解析异常） width: 100px- 再在 hover 或 class 切换时改
width: 200px
更可靠替代方案：transform: scaleX(1) + transition: transform，不触发重排，也不受 Flex 干扰。
真正麻烦的不是写错属性，而是多个隐式行为叠加：父容器宽度飘着、子项内容撑开、min-width: auto 兜底、flex-basis 和 width 混用——任何一个环节没对齐，width 就会“消失”。排查时优先看父容器 Computed width，再查子项 flex-basis 和 min-width，最后才动 width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
