本质区别在flex-basis：0%在无定宽上下文会被当作auto导致内容撑开，0px则严格从零起步再拉伸；IE11中无单位0会被误解析为0%，必须写0px。
flex: 1 1 0% 和 flex: 1 1 0px 有什么实质区别？
本质区别在第三个值——它被解析为 flex-basis，而这个值参与盒模型计算时，% 和 px 的行为完全不同。当父容器没设宽高、或处于不确定尺寸上下文（比如嵌套在 display: flex 容器里但自身没固定尺寸），0% 会被当成 auto 处理，最终可能撑开内容；0px 则严格按零宽度起步，再靠 flex-grow 拉伸。
-
flex: 1 1 0%在某些 Safari 版本中会触发意外的最小宽度计算（尤其配合min-width: auto） - 如果父容器 width 是百分比或 max-content，
0%可能无法真正归零，反而保留文字内容的自然宽度 -
0px更可预测，是多数布局中“从零开始均分”的安全选择
为什么 flex: 2 1 100px 不等于 “占两份”，而 flex: 2 1 0px 才是？
因为 flex 简写展开后是 flex-grow flex-shrink flex-basis，真正决定“份数”的只有 flex-grow，但它的拉伸起点由 flex-basis 决定。若 flex-basis 是 100px，那两个项目分别带着 100px 基础宽度进入分配，剩余空间才按 grow 比例分——结果不是“2:1”，而是“2×100px + 剩余×2/3” vs “1×100px + 剩余×1/3”。
-
flex-basis越大，初始占用越多，grow 分配的“剩余空间”就越少 - 想让 grow 比例完全主导分配，
flex-basis应设为0（推荐0px，避免百分比歧义） -
flex: 2 1 0px和flex: 1 1 0px才真正在剩余空间上按 2:1 拉伸
flex: auto、flex: none、flex: 0 0 auto 这些关键字怎么对应到三个值？
它们是预设简写，不是语法糖，浏览器内部直接映射为固定三元组：
-
flex: auto→flex: 1 1 auto（可伸缩，基线是内容宽高） -
flex: none→flex: 0 0 auto（不伸缩，基线仍是内容尺寸） -
flex: 0→flex: 0 1 0px（注意：这是唯一一个把0当作flex-grow解析，且隐含0px的情况）
最容易错的是把 flex: 0 当成“不占空间”，其实它仍会渲染内容，并可能因 flex-shrink: 1 被压缩——真要强制不占空间，得用 display: none 或 visibility: hidden。
立即学习“前端免费学习笔记（深入）”；
IE11 下 flex 简写第三个值写成 0 会出什么问题？
IE11 对 flex 简写的解析有 bug：当第三个值省略单位（如写 flex: 1 1 0），它会错误地将 0 解析为 0%，而不是 0px，进而触发上面说的百分比计算异常，导致子项宽度失控或换行。
- 必须显式写单位：
flex: 1 1 0px，不能省略px -
flex: 1和flex: 1 1 1在 IE11 中也不安全，都会被误读 - 如果要兼容 IE11，所有
flex简写里的第三个值都建议用0px或auto，避开无单位数字
flex 简写的三个值看着简单，但 flex-basis 的单位和上下文依赖性，才是大多数布局偏差的根源。别信“设成 0 就归零”，得看它是 0px、0% 还是没写单位的 0。
