应设为0；flex-basis设为0可跳过内容测量，避免首次渲染抖动，而auto会触发反复layout，但需配合min-width: 0防止文字压缩或aspect-ratio失效。
flex-basis设成0还是auto？首次渲染抖动的关键分水岭
首次渲染跳动，八成是因为浏览器在 flex 容器里反复测量子项内容宽度——尤其当 flex-basis 是 auto 时，它得先 layout 文字、图片、甚至等宽字体字符，再回退调整，整个过程无法跳过。设成 0 就绕过了这步，直接按剩余空间分配，首帧更稳。
-
flex: 1等价于flex: 1 1 0%（部分浏览器）或flex: 1 1 auto（Firefox / Safari），行为不一致，别依赖简写 - 明确写
flex: 1 1 0或flex-basis: 0，强制跳过内容测量 - 但要注意：如果子项含长文本且没设
min-width: 0，flex-basis: 0可能导致文字被压缩到不可读，需同步加min-width: 0 - 图片加载前占位不稳？不是图片问题，是
flex-basis: auto在等图片 intrinsic size，换成0+aspect-ratio更可靠
移动端用百分比flex-basis为什么越调越抖？
写 flex-basis: 33.33% 看似三等分，实际在 viewport 切换、软键盘弹出、横竖屏旋转时会重算，而父容器 padding/border/box-sizing 的微小差异会让结果偏移 1–2px，滚动中反复触发 layout shift。这不是 bug，是百分比计算本身就不适合动态视口。
- 改用
flex: 0 0 33.33%（即禁用 grow/shrink），避免拉伸变形 - 更推荐
flex: 1+min-width: 300px（按最小可用宽度锚定），让浏览器优先守底线，再均分剩余空间 - 若需响应式断点，用
@media覆盖flex-basis值，而不是靠 JS 动态改 class - 注意：iOS Safari ≤15.6 不支持
flex-basis: content，别用它替代百分比
aspect-ratio + flex-basis 组合失效？缺了这三行就白写
写了 aspect-ratio: 4/3 和 flex-basis: 0，高度还是塌成 0？大概率是默认的 min-width: auto 在作祟——它会锁死 cross-axis 计算，让 aspect-ratio 失效。
- 必须显式加
min-width: 0（关键！否则aspect-ratio不触发） - 加
min-height: 0，防止交叉轴上其他 flex 属性干扰 - 加
flex-shrink: 0，避免父容器挤压导致比例失真 - 示例：
.card { flex: 0 0 auto; min-width: 0; min-height: 0; width: 100%; aspect-ratio: 4/3; }
安卓老 WebView 里 flex-basis 直接不生效？降级策略要硬编码
Android 5.1–6.0 厂商 WebView 对 flex-basis: auto 解析极不稳定，常返回 auto 或 0，导致子项突变、错位。Autoprefixer 生成不了兼容方案，必须手动 fallback。
- 先用
@supports (display: flex)包裹现代写法，里面写flex: 1 1 0 - 外面补一层
display: -webkit-box，子项用-webkit-box-flex: 1，并确保每个子项有显式width（哪怕width: 0）作为计算基准 - 漏掉
<meta name="viewport" content="width=device-width">？老 WebView 会按桌面宽度渲染，所有尺寸全乱 - 真机测试时用
getComputedStyle(el).flexBasis检查返回值，如果是auto，说明声明根本没进渲染树
min-width: 0 这一行——它不显眼，但决定了 aspect-ratio 和 flex-basis: 0 能不能真正起效。没有它，其他所有优化都只是纸面参数。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
