flex-basis百分比是弹性布局中参与空间分配的起点值，按父容器主轴尺寸（含padding）计算，直接用于“容器宽度−各项目flex-basis总和”运算以决定是否触发flex-grow/shrink；width百分比仅为静态声明，仅在flex-basis: auto时作为fallback且受content-box限制。
flex-basis 百分比不是“设个宽度”，而是参与弹性空间分配的起点值；width 百分比只是静态尺寸声明，不参与 flex 布局的三步计算链。
flex-basis: 50% 的实际含义是“用父容器当前主轴宽度 × 0.5 作为初始尺寸”
它直接进入「容器宽度 − 所有项目 flex-basis 总和」这个差值运算，决定后续是否触发 flex-grow 或 flex-shrink。比如父容器宽 400px，三个子项都设 flex-basis: 50%，总和就是 600px，浏览器立刻触发压缩逻辑——这和 width: 50% 完全无关。
-
flex-basis: 50%的参照始终是父容器主轴尺寸（含 padding），不是 content-box - 若父容器宽度未明确（如
width: auto或被浮动撑开），flex-basis: 50%可能解析为 0px - 在
flex-direction: column下，flex-basis: 50%是按父容器 height 计算，不是 width
width: 50% 在 flex 容器里只是 fallback，且极易失效
只要 flex-basis 不是 auto，width 就被跳过。你写 width: 50% + flex: 1，等价于 flex: 1 1 0%，width 根本不进计算流程。
-
width: 50%的参照是父元素 content-box 宽度，受box-sizing和 padding 影响 - 在 flex 容器中，
width仅在flex-basis: auto时才读取，但还要和内容宽度（如长文本、图片固有宽）比大小，谁大取谁 - 响应式切换时，
width: 50%不会触发 flex 重排，而flex-basis: 50%会
IE11 和旧版 Android WebView 对 flex-basis 百分比支持极不稳定
它们常把 flex-basis: 33.33% 解析成 0 或错位，但 flex-basis: 240px 或 flex-basis: 33.3vw 更可靠。
立即学习“前端免费学习笔记（深入）”；
- IE11 要求完整三值写法：
flex: 0 0 33.3%，单写flex-basis: 33.3%大概率失效 - 避免整数百分比（如
33%），改用带小数的33.3%，防止浮点精度截断 - Android WebView 4.4–5.1 中，
flex-basis: 50%行为不可预测，但flex-basis: 50vw稳定
真正难控的不是语法，而是当 flex-basis 百分比遇上 min-width、嵌套 flex-direction: column、或父容器由 max-width + margin: 0 auto 构成时，那个“当前主轴宽度”到底怎么算——它可能被截断、被撑开、甚至动态变化，而 width 从不参与这个过程。
