flex: 1 是分配剩余空间，width: 100% 是强制占满父容器 content 区域宽度；前者让中间栏从零基准拉伸并尊重左右栏宽度，后者无视兄弟元素直接撑满整行，混用会导致布局错乱或失效。
flex:1 和 width:100% 在 Flex 容器里根本不是一回事
直接说结论：flex: 1 是分配剩余空间，width: 100% 是强制占满父容器 content 区域宽度。两者机制不同，混用常导致布局错乱或失效。
典型错误现象：给 .main 加了 width: 100% 后，左右侧边栏被挤出视图、换行，或出现横向滚动条；在 Safari 旧版本中还可能内容截断。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，它让元素从「零基准」开始拉伸，只吃掉其他兄弟项占位后剩下的空间 -
width: 100%不管有没有兄弟项，也不管父容器有没有 padding，它只认父容器的 content width，强行撑满 - 一旦元素写了
flex-basis: 0（比如用了flex: 1），width就完全被忽略——那行width: 100%实际上是废代码
为什么 flex:1 能让中间栏自适应，而 width:100% 会破坏三栏并排
关键在 flex-basis: 0 这个隐含前提。它让中间栏初始尺寸归零，再由 flex-grow: 1 按比例分剩余空间；width: 100% 却无视左右栏存在，直接占满整行。
举个三栏场景：.left 和 .right 固定宽 200px，.main 想填满中间：
- ✅ 正确写法：
.main { flex: 1; }—— 左右各占 200px，剩余全给中间 - ❌ 错误写法：
.main { width: 100%; }—— 它会尝试占满整个父容器（比如 1200px），左右栏只能被挤走或换行 - ⚠️ 更隐蔽的坑：
.main { flex-grow: 1; flex-basis: auto; }—— 因为flex-basis: auto先按内容宽度占位，再伸展，结果往往不是“铺满”，而是“比内容宽一点”
flex:1 在什么情况下看起来像 width:100%
只有当满足全部以下条件时，视觉效果才偶然接近：
- 父容器是
display: flex且flex-direction: row - 该子项是容器内唯一子元素
- 没设
flex-basis（或显式为auto），也没min-width/max-width - 子项内容不撑宽（如空 div 或纯文本未换行）
此时剩余空间 ≈ 父容器宽度，所以“碰巧”填满。但这只是结果巧合，不是机制等价。一旦加个兄弟元素，flex-grow: 1 就立刻按比例分，width: 100% 还是硬占整行。
flex:1 不生效的三个常见原因
别以为写了就一定起作用。最容易被忽略的是：
- 父容器没设
display: flex或display: inline-flex——flex: 1在非 Flex 容器里完全被浏览器忽略 - 父容器高度为
auto且无height或min-height约束 —— “剩余空间”算出来是 0，flex: 1拉无可拉 - 子元素自身
min-height: auto（浏览器默认值）且内容极少 —— Flex 不会压缩它低于内容高度；加min-height: 0才能解锁收缩能力
flex-basis: 0 这个数字看着小，却是整个弹性分配逻辑的起点。漏掉它，或者用 flex: auto 代替 flex: 1，都会让“自适应”变成“看内容脸色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
