flex子项width: 50%不生效，因flex-basis: auto默认覆盖width；需显式设flex-basis: 50%，并确保父容器宽度确定、box-sizing: border-box、min-width: 0。
Flex子项的width: 50%不生效，不是百分比写错了，而是它压根没被当作主轴尺寸依据——浏览器优先用flex-basis，而默认值auto会直接覆盖你写的width。
flex-basis 默认 auto 覆盖 width
Flex子项默认是flex: 0 1 auto，其中flex-basis: auto意味着“按内容宽度或width声明值取一个”，但实际渲染时，width只是 fallback，真正参与计算的是flex-basis。一旦你没显式设flex-basis，浏览器就按auto走，width: 50%就被划掉（开发者工具里能看到）。
- 想让百分比真正起作用，必须写
flex-basis: 50%，而不是只写width: 50% - 如果同时写了
flex: 1，它等价于flex: 1 1 0%，flex-basis被强制设为0%，width彻底失效 - 临时验证：在开发者工具中检查子项的 Computed 面板，看
flex-basis是否显示为auto，且width旁有删除线
父容器宽度不确定导致 100% 无基准
50%是相对于父容器内容区计算的，但 Flex 容器本身若没明确宽度（比如display: inline-flex、浮动后塌陷、position: absolute没设left/right），它的宽度可能是0px或不可预测值，那50%就算出来是0px。
- 给父容器加
outline: 1px solid red，肉眼确认它是否占满预期区域 - 稳妥做法：
width: 100%、max-width: 100vw，或对html/body设height: 100%（高度链同理） - 微信小程序里慎用
rpx进flex-basis，不同设备换算结果差异大，容易溢出
box-sizing 和 min-width 暗中干扰尺寸
即使flex-basis: 50%生效了，若子项用box-sizing: content-box（默认），那padding: 12px会额外加在宽度外；再叠加min-width: auto（文本、<input>等固有最小宽），实际占位远超 50%。
- 全局重置：
* { box-sizing: border-box; }，别忘了*::before, *::after - 横向 Flex 子项必须加
min-width: 0，否则内容撑开宽度，flex-shrink也压不住 -
<input>类元素要双重设min-width: 0：既在它父 flex 项上，也在input自身上
移动端视口和软键盘破坏 calc 稳定性
calc(100% - 24px)在 iOS/Android 软键盘弹出时可能卡住不更新，因为vh突变但浏览器不触发重排；100%若参照的是被 viewport 缩放影响的父容器，结果也会漂移。
- 避免直接依赖
100vh做关键布局，改用100dvh（动态视口高度，2026 年已广泛支持） - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端按桌面宽度（如 980px）渲染，所有百分比都错位 - 监听
resize不够可靠（iOS Safari 键盘收起常不触发），可配合focusin/focusout手动重设
真正让百分比宽度落地的，从来不是单写一个width，而是flex-basis明确、父宽确定、box-sizing统一、min-width放开这四件事同时成立——漏掉任何一个，它都会在某个设备或交互瞬间失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
