直接用display: flex能实现三栏响应式布局，但中间栏不自适应、左右栏被压缩等问题源于未管控flex-basis、min-width及盒模型干扰；flex: 1等价于flex-grow: 1、flex-shrink: 1、flex-basis: 0%，从0宽度分配剩余空间，而长文本、图片等固有尺寸会顶开中间栏，需加min-width: 0、box-sizing: border-box并避免width与flex混用。
直接用 display: flex 就能搞定三栏响应式布局，但多数人卡在中间栏不自适应、左右栏被压缩、小屏下挤成一团——问题不在 Flex 本身，而在没管住 flex-basis、min-width 和盒模型干扰。
为什么中间栏设了 flex: 1 还是不占满？
因为 flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，它从「0 宽度」开始分配剩余空间。一旦左右栏有内容撑开（比如长文本没换行、图片没约束），就会吃掉本该分给中间栏的空间。
- 检查中间栏是否用了
white-space: nowrap或包含未设max-width的<img>；加min-width: 0强制允许压缩 - 所有子项必须设
box-sizing: border-box，否则padding和border会额外加宽 - 别给中间栏同时写
width和flex: 1，后者会覆盖前者 - 父容器别误加
justify-content: space-between，它插入的间隙会挤占可分配空间
左右栏固定宽度但小屏下被压扁？
Flex 默认允许子项收缩到内容最小尺寸，而文字、图标等没有天然宽度下限。单纯写 width: 200px 在窄屏下会被压缩，甚至文字叠在一起。
- 左右栏改用
flex: 0 0 200px（不放大、不缩小、基准宽 200px），比只写width更可靠 - 如果还要防极端压缩，加
min-width: 200px双保险 - 避免用
flex-shrink: 0单独控制——它只禁缩，不防放大，比例失衡时仍可能溢出
移动端怎么切单列又不重写 HTML？
Flex 天然支持方向切换，但很多人只改 flex-direction: column，忘了重置子项宽度，结果三栏在竖排时还各自占着横排的宽度，上下堆叠却留大片空白。
- 在
@media (max-width: 768px)里显式写.left, .middle, .right { width: 100%; } - 如果语义上
.middle是主内容，加order: -1让读屏器和搜索引擎优先识别它 - 别依赖
margin控制列间距，小屏下用gap: 1rem更干净，且不会塌陷
真正难调的从来不是“怎么写出来”，而是当设计改说“左栏要 240px、右栏缩到 80px、中间最小不能小于 300px”时，你能不能三秒内定位是改 flex-basis、加 min-width，还是动 flex-grow 权重——这时候看 computed styles 里的实际 flex-basis 值，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
