flex: 1 分配的是父容器中未被其他元素占用的剩余自由空间，取决于各子项的flex-basis与父容器总宽的差值；设多个flex: 1仅在flex-basis一致或为0时均分，否则内容宽者先占位再分剩余。
flex: 1 到底分配的是什么空间？
flex: 1 不是“占满父容器”，而是“拿走父容器里剩余的、没被其他元素占用的自由空间”。这个“剩余空间”取决于所有 flex 项的 flex-basis（默认是 auto，即内容宽度）和父容器总宽之间的差值。
常见误解是给多个子项都设 flex: 1 就能均分——这只有在它们初始宽度（flex-basis）一致或为 0 时才成立。否则内容多的项会先撑开，再平分剩下的空隙。
- 想严格等宽：用
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0） - 想保留内容宽度再均分剩余：保持默认
flex: 1（等价于flex: 1 1 auto） - 父容器必须有明确宽度（比如
width: 100%或固定值），否则“可用空间”不可计算
为什么设置了 flex: 1 却没撑满？常见原因
最常卡在这几个点上：
- 父容器没设
display: flex——flex: 1在非 flex 容器里完全无效 - 父容器宽度为
auto（比如未设宽的div在文档流中），导致“可用空间”为 0 - 子元素本身有
margin、border或padding，挤占了 flex 分配空间（尤其box-sizing: content-box下） - 存在其他 flex 项设置了固定宽度（如
width: 200px）或flex-basis，抢走了本该分配的空间
快速验证：给父容器加 outline: 1px solid red，看它是否真有你预期的宽度范围。
立即学习“前端免费学习笔记（深入）”；
flex: 1 和 flex: 1 0 0 的实际差异示例
假设有三个 div 子项，内容分别是 “A”、“BBB”、“CCCCC”：
.container { display: flex; width: 600px; } .item { flex: 1; } /* 默认 flex-basis: auto → 按文字宽度先占位，再分剩余 */结果：长文本项更宽，不是等宽。
改成：
.item { flex: 1 0 0; } /* flex-basis: 0 → 所有项从 0 开始，均分全部 600px */结果：三者严格各占 200px（忽略 border/padding 影响）。
注意：flex: 1 0 0 下，如果内容超长，可能溢出或换行——因为不再预留内容空间。
在响应式或嵌套 Flex 中要注意什么？
嵌套 flex 容器时，flex: 1 的“可用空间”只相对于**直接父容器**，不会穿透多层。容易踩坑的点：
- 外层 flex 设了
flex-direction: column，内层想横向铺满——得确保内层容器本身宽度已占满（比如加width: 100%） - 媒体查询中改父容器
flex-direction，但忘了调整子项的flex-basis或min-width，导致小屏下内容被压缩变形 - 使用
flex: 1的项内部还有 flex 布局，而它的高度没被约束（比如父项没设height或min-height），会导致内部 flex 高度塌陷
复杂布局里，flex: 1 看似简单，实则依赖整条 flex 链路上每个节点的尺寸控制是否闭环。漏掉任意一层的尺寸锚点，就容易“突然不撑满”。