三栏设flex:1仍不等宽，因flex:1等价于flex-grow:1、flex-shrink:1、flex-basis:0，从0宽度起步分配剩余空间，但长文本、图片、min-width或white-space:nowrap等固有尺寸会顶开其他列；需加min-width:0、box-sizing:border-box并避免width与flex混用。
直接写 flex: 1 能快速实现三栏布局，但“快速”不等于“无脑”，多数错位、换行、不等宽问题都出在没理清 flex-basis 和盒模型干扰上。
为什么三栏都设 flex: 1 还是不等宽
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写——它让三列从「0 宽度」起步，再按权重瓜分剩余空间。但只要其中一列有固有尺寸（比如长文本未换行、图片未约束、min-width 未重置），就会顶开其他列。
- 检查子项是否用了
white-space: nowrap或包含未限制宽度的<img>；加min-width: 0强制允许压缩 - 确认所有子项已设
box-sizing: border-box，否则padding和border会额外撑宽 - 避免给子项同时设
width和flex: 1，后者会覆盖前者 - 父容器别误加
justify-content: space-between，它插入的间隙会挤占分配空间
中间栏自适应时，左右栏被挤压怎么办
这不是 flex: 1 的错，而是左右栏缺乏最小宽度保护。Flex 默认允许子项收缩到内容最小尺寸，而文字、图标等内容本身没有天然下限。
- 左右栏显式加
min-width: 200px（按需调整），比只写width: 200px更安全 - 若需固定宽度且绝对不缩，用
flex: 0 0 200px，即flex-grow: 0+flex-shrink: 0+flex-basis: 200px - 中间栏保持
flex: 1，但确保父容器没设flex-wrap: wrap - 别依赖 margin 模拟列间距，优先用
gap: 12px（现代浏览器）或row-gap（兼容旧版 Safari）
想按比例分配（比如 2:1:1）该写什么
不要用 width: 50% + width: 25%，那不是弹性方案。比例必须靠 flex-grow 权重，且统一 flex-basis: 0 才准。
- 第一列：
flex: 2（等价于flex: 2 1 0） - 第二列：
flex: 1 - 第三列：
flex: 1 - 如果某列需要「可放大但不可缩小」，写成
flex: 2 0 0，但注意小屏下可能溢出 - 避免只写
flex: 2就以为万事大吉——它隐含flex-shrink: 2，压缩时反而比flex: 1缩得更狠
真正容易被忽略的是：所有 flex 子项的 min-width 和 white-space 行为，它们会无声覆盖 flex-basis: 0 的意图。调布局前先看 computed styles 里的实际 flex-basis 值，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
