flex: 1不是填满剩余空间的快捷开关，而是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的固定组合，强制元素从零宽度起步再按比例瓜分剩余空间，其关键在于flex-basis: 0%彻底放弃内容尺寸主张。
flex: 1 不是“让元素填满剩余空间”的快捷开关，而是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 三者的固定组合——它强制元素从零宽度起步，再按比例瓜分剩余空间。
flex: 1 的完整展开就是三个值
浏览器解析 flex: 1 时，不会只设 flex-grow，它会一次性写入全部三个子属性：
-
flex-grow: 1：有剩余空间时，参与分配（不是“独占”，是“按比例”） -
flex-shrink: 1：空间不足时，允许缩小（默认值就是 1，但这里显式锁定） -
flex-basis: 0%：初始尺寸归零，不看内容、不看 width、不看 min-content
这个 0% 是关键。它让元素彻底放弃“自我尺寸主张”，一切听从容器调度。这也是为什么 flex: 1 和 width: 100% 完全不同：后者强行占满父容器 content 区，前者只吃兄弟项占位后剩下的那部分。
flex: 1 在三栏布局中为何能自适应中间栏
典型场景：.left 固宽 200px，.right 固宽 150px，.main 要填满中间。这时：
- ✅ 正确写法：
.main { flex: 1; }→flex-basis: 0%让它初始为 0，flex-grow: 1把 200px + 150px 之外的所有空间全分给它 - ❌ 错误写法：
.main { width: 100%; }→ 它直接尝试占满整个父容器宽度（比如 1200px），左右栏只能被挤走或换行 - ⚠️ 隐蔽错误：
.main { flex-grow: 1; flex-basis: auto; }→ 先按内容宽度占位（比如文字撑出 320px），再伸展，结果不是“填满”，而是“比内容略宽”
flex: 1 不生效的三个硬性前提
写了 flex: 1 却没反应？大概率卡在这几个地方：
- 父容器没设
display: flex或display: inline-flex—— Flex 属性在非 Flex 容器里完全被忽略 - 父容器高度为
auto且没设height或min-height—— “剩余空间”算出来是 0，flex-grow拉无可拉 - 子项内容本身有最小宽度约束（比如长单词、图片、
min-width: 200px），而你没加min-width: 0—— 浏览器默认min-width: auto，会阻止它缩到比内容还小
真正容易被忽略的是 flex-basis: 0% 这个隐含行为：它不是“建议”，是强制重置起点。一旦你手动改了 flex-basis 或混用 width，就等于绕开了这个机制——布局失效往往就藏在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
