Flex容器未占满屏幕宽度的主因是父元素未撑开或存在margin/padding干扰；应检查html/body默认样式、display类型（避免inline-flex）、文档流状态，并用width:100%;min-width:100vw;box-sizing:border-box确保满屏。
flex 容器没占满屏幕宽度？先看父元素有没有撑开
直接给 display: flex 的容器加 width: 100% 很可能无效，因为它的父元素（比如 <body> 或某个包裹 div）默认不占满视口宽度，或者有 margin、padding 干扰。Flex 容器的宽度只会在其**包含块（containing block）** 允许的范围内展开。
实操建议：
- 检查父级是否设置了
width: 100%或max-width限制 - 确认
html和body没有默认margin（浏览器自带的 8px）——加html, body { margin: 0; height: 100%; } - 如果容器是直接子元素，用
width: 100vw更可靠（但注意vw包含滚动条宽度，可能略超）
flex 容器本身设了 width: 100% 还是没效果？检查 display 层级和盒模型
display: flex 不会改变元素的显示类型本质：它仍是块级元素（block-level），所以 width: 100% 理论上应生效。但如果它被设为 inline-flex，那它就变成行内级（inline-level），width 和 height 就会被忽略。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
display: inline-flex却还指望width: 100%生效 - 容器外层用了
float或position: absolute，导致脱离文档流，宽度计算失效 - 容器有
box-sizing: border-box但父容器 padding 挤压了可用空间
更稳妥的满屏方案：用 viewport 单位 + min-width 防抖动
单纯依赖 width: 100% 在响应式或嵌套布局中容易失守。100vw 是更直接的选择，但要注意滚动条导致的横向溢出问题（尤其在 Safari 中）。
推荐写法：
.full-flex {
display: flex;
width: 100%;
min-width: 100vw;
box-sizing: border-box;
}说明：
-
width: 100%保证在常规流中继承父宽 -
min-width: 100vw强制至少占满视口，覆盖父容器收缩场景 -
box-sizing: border-box防止padding或border导致实际宽度超限
移动端或滚动时突然变窄？别忘了 overscroll 和 scroll bar 占位
在 iOS Safari 或部分 Android 浏览器中，页面滚动时地址栏收起/展开会触发 resize，导致 100vh/100vw 动态变化；同时滚动条本身会占用宽度（约 12–17px），使 100% 计算值变小。
应对方式：
- 避免在关键布局层用
100vh做高度基准（它比100%更不稳定） - 如需精确满屏，用 JS 动态读取
document.documentElement.clientWidth并设为style.width - CSS 里可加
overflow-y: scroll强制滚动条常驻，消除宽度跳变
真正卡住的往往不是 display: flex 本身，而是它所处的上下文——尤其是父级尺寸控制、盒模型设定和视口单位的隐含行为。调试时优先 inspect 父元素 computed width，而不是反复调 flex 子项。
