百分比宽度失效主因是父容器无明确宽度或box-sizing未设为border-box；flex中width被flex属性覆盖；viewport缺失致移动端基准错乱；flex-wrap换行时百分比累积误差引发换行。
百分比宽度在现代响应式布局中为什么常常失效
直接给 width: 100% 看似自适应，但实际常被父容器的 padding、border 或未重置的 box-sizing 拉偏。更关键的是：百分比是相对于父元素内容区（content box）计算的，如果父元素没有明确宽度（比如浮动后塌陷、或 display: inline），子元素的百分比会失去参照，最终按 0 计算。
常见错误现象：width: 80% 在某些嵌套层级下完全不生效，或者在移动端显示为极窄条。
- 确保父容器有可计算的宽度（如
width: 100%或max-width+margin: 0 auto） - 统一设置
*, *::before, *::after { box-sizing: border-box; }，避免 padding/border 溢出 - 避免在百分比元素上同时设
float或position: absolute，它们会脱离常规流，影响参照系
Flex 布局中 justify-content 和 width 的冲突怎么解
当容器设了 display: flex，又给子项设 width: 100%，反而可能被 justify-content: space-between 或 flex-grow 覆盖——因为 flex 子项的主轴尺寸优先由 flex 相关属性（flex-basis、flex-grow）控制，width 仅作 fallback。
使用场景：做横向导航栏、卡片栅格、表单字段组时，容易误以为 “设了 width 就能控宽”，结果布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 想严格按百分比分配空间，用
flex: 0 0 33.333%（即flex-grow: 0; flex-shrink: 0; flex-basis: 33.333%） - 需要弹性伸缩时，改用
flex: 1配合min-width（如min-width: 280px）防过度压缩 - 避免对 flex 子项同时写
width和flex，后者会优先生效，前者可能被忽略
移动端视口未声明导致 flex 和百分比全部“失准”
没加 时，移动端浏览器会以桌面宽度（通常是 980px）渲染页面，此时 width: 100% 是相对 980px，不是屏幕物理宽度；flex 容器的主轴也按此基准计算，造成所有响应逻辑失效。
