中间栏必须用flex: 1，左右栏必须用flex: 0 0 宽度值（如200px），父容器必须设display: flex——三者缺一不可；因flex: 1等价于flex-grow: 1、flex-shrink: 1、flex-basis: 0，从零起点分配剩余空间，避免内容撑开或旧版safari压缩异常。
直接说结论：中间栏必须用 flex: 1，左右栏必须用 flex: 0 0 宽度值（比如 flex: 0 0 200px），父容器必须有 display: flex —— 缺一不可，否则“自适应”就是假象。
为什么 flex: 1 是中间栏唯一靠谱写法
flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在 flex-basis: 0：它让浏览器从“0宽度起点”开始分配剩余空间，彻底规避内容撑开、min-width 干扰、旧版 Safari 压缩异常等问题。只写 flex-grow: 1 很容易失效，尤其当中间栏里有图片、输入框或长文本时。
- 如果中间栏写了
width: 100%或max-width: 100%，会和flex: 1冲突，后者被覆盖但逻辑混乱 -
flex-grow: 2不是“更宽”的解法——它只在左右栏也参与弹性分配时才起作用，而你通常不希望左右栏被压缩 - IE11 需要显式补
-ms-flex: 1，否则中间栏可能直接塌缩为 0
左右栏为什么不能只写 width
纯 width: 200px 在 Flex 容器里只是“初始提示”，不是约束。当容器总宽不足时，Flex 引擎仍可能压缩它（尤其在 Safari iOS 15.4 以下或极端缩放下），导致布局错位。
- 用
flex: 0 0 200px才真正锁死：不放大、不缩小、基准就是 200px - 如果左右栏需响应式隐藏，
display: none后flex: 1的中间栏会立刻占满全宽；而仅靠width的写法，常需额外重置margin才能清空白 - 左右栏宽度可不同，比如左栏
flex: 0 0 240px，右栏flex: 0 0 160px，完全没问题
父容器和高度控制最容易漏的三件事
很多“中间栏没撑开”“等高失效”“移动端变单行”问题，根源不在子项，而在父容器配置断链。
- 父容器没设
min-height: 100vh或嵌套在flex-direction: column的全高结构中，flex: 1就没空间可分 - 某个祖先元素有
overflow: hidden且高度未设满，Flex 计算出的“剩余空间”为 0 - 用了
flex-wrap: wrap却没配媒体查询，窄屏下三栏换行，flex: 1只在单行内生效，中间栏看起来“失效”了
移动端适配时别信“自动”
小屏下三栏堆叠成一列，不能只靠 flex-wrap: wrap。因为 flex: 1 会让每栏仍试图占满整行宽度，结果是文字被压扁或溢出。
- 必须加媒体查询，例如：
@media (max-width: 768px) { .left, .main, .right { flex: none; } } - 或者更稳妥：
@media (max-width: 768px) { .left, .main, .right { flex: 0 0 100%; } }，明确控制为单列 - 若需保留间隙，优先用
gap: 16px；旧版 Safari 用row-gap: 16px，别用margin模拟，易触发父容器overflow
最常被忽略的点：所有 flex 分配都依赖“可用空间”的计算，而这个空间不是凭空来的——它由父容器的尺寸、祖先的 overflow 和 position 共同决定。调试时先查父容器有没有高度来源，再看有没有 overflow: hidden 或 float 干扰，最后才动子项的 flex 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
