用 display: flex 实现左右固定+中间自适应只需三行 css：容器设 display: flex；左右栏用 flex: 0 0 240px；中间栏用 flex: 1 并配 min-width: 0，再加 gap 控制间距。
用 display: flex 最快搭出左右固定+中间自适应
不用算百分比、不写媒体查询、不碰 float，三行 CSS 就能跑通。前提是 HTML 结构顺序是左-中-右（或任意顺序，flex 不依赖 DOM 顺序）。
-
.container必须设display: flex，否则子项不会按 flex 规则分配空间 - 左右栏写
flex: 0 0 240px—— 明确禁止缩放、锁定宽度，比只写width: 240px更稳（避免内容撑大时意外缩容） - 中间栏必须用
flex: 1，不是flex: auto或flex: 1 1 auto；前者强制“拿走所有剩余空间”，后者在某些浏览器里会因内容高度触发缩放 - 加
gap: 12px控制栏间距，别用margin：它会干扰 flex 的空间计算逻辑，尤其在响应式断点切换时容易错位
calc() 配合 flex 能用，但得防两个坑
有人喜欢在中间栏上写 width: calc(100% - 480px)，看起来直观，实际容易失效——尤其当父容器不是直接 viewport 宽度时（比如嵌套在另一个 flex item 里）。
-
calc()里+和-两侧必须有空格，calc(100% - 240px - 240px)✅，calc(100%-240px-240px)❌（浏览器直接忽略该样式） - 即使写对了，若中间栏里有长单词或 URL，仍可能撑破宽度——必须加
min-width: 0，否则 flex item 默认的min-width: auto会阻止calc()生效 - 真正推荐的做法是：只用
flex: 1，把calc()当备用方案（比如要兼容 IE11 且不能用 grid）
别用 float 或 position: absolute 搭三栏
这两种方式现在只剩兼容老项目的价值，新项目硬上等于主动埋雷。
-
float要清浮动（overflow: hidden或伪元素），父容器高度一塌陷，下面所有内容就全乱套 -
position: absolute把左右栏拉出文档流，中间栏靠margin撑开，但一旦页面 zoom 或 viewport 缩放（比如 iOS Safari 双指放大），margin值不变，三栏立刻错位重叠 - 两者都不支持
gap，间距只能靠padding或margin，而margin在 flex/grid 外部易塌陷，padding又会吃掉内容宽度
box-sizing: border-box 是隐形开关，漏写=布局必崩
所有三栏方案里，只要左右栏或中间栏用了 padding 或 border，没设这个属性，实际宽度就超预期。
- 例如
width: 240px; padding: 12px;在默认content-box下，实际占宽是240px + 24px（左右 padding） - 全局写一句
* { box-sizing: border-box; }能省掉 90% 的宽度调试时间 - 特别注意：flex 或 grid 容器的子项默认仍是
content-box，哪怕父容器设了border-box也不继承
中间栏的 flex: 1 和 min-width: 0 经常被当成可选项，其实它们是同一枚硬币的两面——一个管空间分配，一个管内容约束，漏掉任一个，在真实业务场景（比如渲染 Markdown 表格、用户粘贴长链接）里都会突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
