flex: 1 等价于 flex: 1 1 0%，不是 0px；其 flex-basis: 0% 使元素初始主轴尺寸为 0% 容器宽，忽略内容宽度，导致压缩，应依场景选用 auto 或显式单位。
flex: 1 1 0 是 flex: 1 的完整写法，但 0 不是 0px
很多人看到 flex: 1 1 0 就默认第三个值是 0px，这是错的。实际浏览器解析为 flex-basis: 0%（不是 0px），这点在 Chrome、Firefox、Safari 中行为一致。它意味着：所有子项的初始主轴尺寸被设为「0% 容器宽度」，即完全忽略自身内容宽度，从零开始按 flex-grow 分配空间。
常见错误现象：flex: 1 下文字被强制截断、图标挤压变形、按钮文字换行异常——根本原因就是 flex-basis: 0% 让元素失去了内容兜底宽度。
-
flex: 1→ 等价于flex: 1 1 0%，不是0px - 想用像素基准？必须显式写
flex: 1 1 200px，不能省略单位 -
0%在 flex 计算中参与「基准总和」，影响剩余空间 = 容器宽 − 所有flex-basis之和
为什么 flex-basis: 0% 会导致内容被压缩
Flex 布局的空间分配分两步：先按 flex-basis 占位，再按 flex-grow 分剩余空间。当 flex-basis: 0%，等于说“先占 0 宽度”，哪怕你写了 min-width: 120px，它仍会尝试压缩——因为 flex-shrink: 1 默认允许缩小，且压缩权重与 flex-basis × flex-shrink 相关。
典型场景：水平排列的卡片组，每张卡含图标 + 一行文字。用 flex: 1 后小屏幕下文字全挤成一团，甚至图标消失。
- 解决办法不是加
min-width，而是换flex-basis类型：用flex: auto（即flex: 1 1 auto） -
auto表示以内容宽度或显式width/min-width为基准，再伸缩 - 如果必须用
0%，记得搭配min-width: 0防止内容撑破布局（尤其内嵌文本或图片时）
flex: 1 1 0% 和 flex: 1 1 auto 的计算差异
假设容器宽 600px，两个子项：A 内容宽约 320px，B 内容宽约 100px：
用 flex: 1 1 0%：
→ 基准总和 = 0% + 0% = 0px
→ 剩余空间 = 600px
→ 每项得 300px，A 文字被截断，B 留大片空白
用 flex: 1 1 auto：
→ 基准总和 ≈ 320px + 100px = 420px
→ 剩余空间 = 180px
→ 每项再分 90px，最终 A ≈ 410px、B ≈ 190px，更符合视觉预期
- 数值差异来自
flex-basis是否参与初始占位 -
auto不是“不设基准”，而是动态取width、min-width或内容固有宽 - 若子项设了
width: 200px，flex: auto会以200px为flex-basis起点；flex: 1则直接无视
什么时候该坚持用 flex: 1 1 0%
它不是 bug，是设计选择。真正需要它的场景很明确：你要求子项**严格按比例瓜分容器空间，完全不考虑内容尺寸**。
比如仪表盘中的等宽数据卡片格子、网格化表单标签列、固定列数的响应式图库（每列宽度必须精确为 1/3 容器宽）。
- 别在含文本、图标、输入框的 UI 区域滥用
flex: 1 - 移动端侧边栏抽屉菜单项？优先
flex: auto，避免文字重叠 - 调试时可临时加
outline: 1px solid red查看各子项真实flex-basis占位，比猜更可靠
关键点在于：flex-basis 的值类型（%、px、auto）决定了整个伸缩逻辑的起点，而这个起点经常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
