Flex容器默认撑满父容器，设width会破坏自适应；flex-basis是子项初始主轴尺寸，参与弹性分配，非容器属性；百分比width失效常因父容器无明确宽度或包含块异常；等分推荐用flex:1而非width百分比。
flex容器宽度不随父容器变化？检查是否设了固定width
Flex容器默认是块级元素，会自动撑满父容器宽度，但一旦你给它加了 width: 300px 或 width: 50%，它就按这个值计算，不再“自适应”——哪怕父容器缩放，它也只认自己写的那个百分比或像素值。常见误操作是：在 flex 容器上同时写 display: flex 和 width: 80%，结果发现缩放父容器时子项错位或溢出。
真正想让 flex 容器“自适应”，通常不需要显式设 width，让它靠默认行为占满即可。如果必须控制尺寸，优先用 flex-basis 配合 flex-grow/flex-shrink，而不是直接改容器 width。
flex-basis 是什么？它和 width 的区别在哪
flex-basis 是 flex 项目（即 display: flex 的直接子元素）的初始主轴尺寸，不是容器的属性。很多人误把它当容器宽度来用，结果没效果。比如你写：
.container {
display: flex;
}
.container > div {
flex-basis: 30%;
}这表示每个子项“初始占父容器主轴方向的 30%”，但所有子项加起来可能超 100%，这时 flex-shrink 会介入压缩；如果留有空间，flex-grow 可能拉伸。它不锁死尺寸，而是参与弹性分配。
立即学习“前端免费学习笔记（深入）”；
-
width是盒模型固有属性，作用于任何元素，设了就尽量按该值渲染（除非被 flex 压缩） -
flex-basis只对 flex 项目生效，是弹性布局中“分配前的起点”，后续可能被 grow/shrink 调整 - 设
flex-basis: 0+flex-grow: 1才能实现等分（如三列均分就是flex: 1）
百分比 width 在 flex 容器里为什么有时失效
当 flex 容器是某个非块级父元素的子元素（比如父元素是 inline-block 或设置了 float），它的百分比 width 会相对于“包含块”计算，而这个包含块可能不是你认为的父容器。更隐蔽的问题是：如果父容器没有设定明确宽度（比如只写了 max-width: 1200px 但没设 width），那么 width: 80% 就没参照物，浏览器按 0 计算。
实操建议：
- 确保父容器有可计算的宽度（如
width: 100%、max-width配合width: 100%，或固定像素） - 避免在 flex 容器上混用
width和flex相关属性，容易冲突 - 调试时用浏览器开发者工具看 computed width，确认它是否真等于你期望的百分比值
想让子项按比例分配宽度？别只靠百分比
单纯给每个子项设 width: 33.33% 看似能三等分，但 margin、border、box-sizing 不一致会导致错位或换行。flex 布局的优势正在于用 flex 缩写替代这些手动计算。
推荐写法：
.container {
display: flex;
}
.item-1 { flex: 2; } /* 占 2 份 */
.item-2 { flex: 1; } /* 占 1 份 */
.item-3 { flex: 1; } /* 占 1 份 */这组规则下，三个子项按 2:1:1 分配剩余空间，且自动处理 padding/margin/border，无需算百分比。如果一定要用百分比语义，可结合 flex-basis：
-
flex: 0 0 25%→ 不伸缩，基础宽度为父容器 25% -
flex: 1 1 20%→ 可伸缩，起始为 20%，再按权重分配剩余空间
注意：百分比 flex-basis 是相对于 flex 容器的主轴尺寸计算的，这点和 width 一致，但它只在 flex 分配流程中起作用，后续仍可能被调整。
最容易被忽略的是：flex 容器的 min-width 默认是 auto，可能导致内容挤压时子项无法缩小到预期宽度。必要时显式设 min-width: 0 给子项，否则文字或图片可能撑开布局。
