最直接的写法是grid-template-columns: 240px 1fr，第一列固定240px，第二列占剩余空间；三栏可写为240px 1fr 300px；Flex布局中推荐flex: 0 0 240px和flex: 1组合，注意box-sizing、min-width: 0兼容性及响应式重置。
grid-template-columns: 240px 1fr 是最直接的写法
用 grid-template-columns: 240px 1fr 就能明确告诉浏览器：第一列严格占 240px，第二列吃掉所有剩余空间。它不依赖父容器是否设了 width，也不怕内容撑开或缩放抖动，比 calc(100% - 240px) 稳定得多。
常见错误是给主体区域再加 width: 100% 或 max-width，这会覆盖 1fr 的分配逻辑，导致自适应失效。
-
1fr不是“100%”，而是“剩余可用空间的一份”，哪怕父容器宽 1200px，减去 240px 后剩下 960px，1fr就是 960px - 如果要三栏（左固定 + 主体 + 右固定），写成
grid-template-columns: 240px 1fr 300px即可，中间仍由1fr控制 - 别在主体上设
margin-left或padding-left来模拟留白——那不是布局，是补丁
flex: 0 0 240px 和 flex: 1 的组合更通用
当布局需要嵌套、或要兼容旧项目结构时，display: flex 更灵活。flex: 0 0 240px 比单纯写 width: 240px 更可靠，它锁死侧栏不放大、不缩小、基准就是 240px；主体用 flex: 1（等价于 flex: 1 1 auto），不是 flex: 1 1 0——后者在某些 Safari 版本里会让主体收缩到内容最小宽度。
容易踩的坑：
- 父容器没设
min-height或高度来源（比如min-height: 100vh），flex 项可能塌成一条线 - 主体加了
padding后溢出？必须加box-sizing: border-box，否则 padding 会额外加在flex: 1分配的宽度上 - IE11 下必须补
min-width: 0到主体上，否则它可能算错最小宽度而消失
fr 与 px 混用时，gap 不能替代 margin
gap 在 Grid 中很干净，但一旦混用 px 和 fr，gap 的行为就和预期一致；可如果用 Flex 布局，gap 在 IE11 和部分老版 Edge 中完全不支持，只能靠 margin 控制间距。
实操建议：
- Grid 下优先用
gap: 16px，简洁且语义清晰 - Flex 下统一用
margin-right: 16px给侧栏，或margin-left: 16px给主体——但注意别两边都加，否则间距翻倍 - 不要试图用
fr去“模拟”边距，比如grid-template-columns: 240px 16px 1fr，这会让布局脆弱，响应式时难维护
响应式切换时，fr 和 flex: 1 都要重置
在 @media (max-width: 768px) 下切单栏，不能只隐藏侧栏，得让整个布局退回到文档流自然排列。Grid 方案中，把 grid-template-columns 改成 1fr 即可；Flex 方案中，把父容器 display 改回 block，并重置子项的 flex 值为 flex: none。
关键点：
- 别用
display: none隐藏侧栏后还留着flex: 1——它仍参与计算，可能影响高度或滚动条 - 移动端下如果还要保留侧栏（比如抽屉式），那就别用
flex: 1或1fr，改用绝对定位 + transform 平移，避免干扰主文档流 - 所有基于
fr或flex的自适应，都依赖父容器有明确的尺寸上下文，这点在嵌套路由或动态插入的 DOM 中最容易被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
