flex-basis设百分比无效是因为父容器缺少明确的主轴尺寸（如width/height），导致浏览器无法解析而回退到auto；需确保父容器有display:flex、正确flex-direction及显式主轴尺寸。
flex-basis设百分比为什么没效果
因为 flex-basis 的百分比值是相对于父容器主轴方向的尺寸计算的，但前提是父容器必须有明确的主轴尺寸（比如设置了 width 或 height），否则浏览器无法解析百分比——结果就是退回到 auto 行为，看起来“没生效”。
- 常见错误现象：
flex-basis: 50%写了，但子项宽度始终撑满或收缩异常 - 检查父容器是否设置了
display: flex且主轴方向（flex-direction）与你期望的尺寸方向一致（比如横向布局需父容器有明确width） - 移动端常因 viewport 设置不全或父级宽高未继承导致失效，建议在根 flex 容器上显式写
width: 100%或用max-width配合margin: 0 auto
移动端 flex 布局用百分比 + flex-basis 的安全写法
纯百分比 flex-basis 在 iOS Safari 旧版本（flex 简写 + 固定比例，再配合媒体查询兜底。
- 推荐写法：
flex: 0 0 50%（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%），避免只设flex-basis被其他默认值干扰 - 必须搭配
box-sizing: border-box，否则 padding/border 会撑出容器，破坏百分比计算 - 在
@media (max-width: 768px)中可改用flex: 0 0 100%实现堆叠，比单纯改flex-direction更可控
flex-basis 百分比 vs width 百分比的区别
两者视觉结果可能相似，但行为逻辑完全不同：前者参与 flex 分配算法，后者只是静态尺寸。一旦父容器空间不足或存在 flex-shrink，差异立刻暴露。
-
width: 50%：强制占父容器一半宽度，超出就溢出，不参与 flex 调整 -
flex-basis: 50%：作为初始主轴尺寸参与分配，若设了flex-shrink: 1，它会被压缩；若设flex-shrink: 0，则保持 50%，但可能换行或溢出 - 性能影响：两者渲染开销接近，但
flex-basis触发 flex layout 重排，width是普通 layout，复杂嵌套下前者略慢
真机调试时 flex-basis 百分比突然失效的排查点
不是代码写错了，大概率是视口或祖先节点“悄悄”截断了尺寸传递链。
立即学习“前端免费学习笔记（深入）”；
- 检查
<meta name="viewport">是否缺失或width=device-width拼错（常见拼成devide） - 父级某个容器用了
position: absolute或transform，导致 flex 容器丢失包含块宽度上下文 - iOS Safari 对
flex-basis: calc(50% - 10px)支持不一致，建议拆成flex-basis: 50%+margin替代 - 某些 UI 框架（如 Ant Design Mobile）内部重置了
flex-basis，需加!important或提高选择器权重
flex 布局的百分比适配，本质是尺寸上下文的传递问题，而不是 flex 自身有多难——断在哪一级，就从哪一级开始补 width 或 max-width。
