CSS布局如何创建左右两侧固定而中间区域自适应

用 display: flex 实现三栏布局最稳，父容器设 display: flex 且 flex-direction: row，左右固定宽（flex: 0 0 240px/180px），中间 flex: 1 并加 overflow: auto；IE11 需写为 flex: 1 1 0 并补 min-width: 0。

用 display: flex 实现三栏布局最稳

现代浏览器下，display: flex 是唯一既不用计算宽度、也不依赖 float 或 position 黑魔法的可靠方案。它天然支持“左右固定 + 中间自适应”，且 DOM 顺序自然，无障碍和 SEO 友好。

常见错误是给中间区域设 flex: 1 却忘了父容器没设 display: flex，或者把 flex-direction 错设成 column —— 这会导致三栏垂直堆叠。

• 父容器必须设 display: flex，且保持默认 flex-direction: row
• 左侧/右侧区域设固定宽度（如 width: 200px）或 flex: 0 0 200px（更稳妥，防止被压缩）
• 中间区域只设 flex: 1，不设 width，否则会覆盖弹性行为
• 若中间内容超长需滚动，记得加 overflow: auto，且父容器要有明确高度或 min-height

.container {
  display: flex;
}
.left { flex: 0 0 240px; }
.right { flex: 0 0 180px; }
.main { flex: 1; overflow: auto; }

IE11 下 flex: 1 失效怎么办

IE11 对 flex: 1 解析有 bug：当兄弟元素没设 flex-basis 时，它可能完全不占空间。这不是兼容性开关问题，而是渲染引擎缺陷。

使用场景集中在企业内网系统，用户无法升级浏览器。别试图用 -ms-flex 前缀硬改，那只会引入更多不一致。

立即学习“前端免费学习笔记（深入）”；

• 把中间区域的 flex: 1 拆成显式三值：flex: 1 1 0（即 flex-grow: 1, flex-shrink: 1, flex-basis: 0）
• 确保左右两侧也用完整写法，比如 flex: 0 0 240px，避免 IE 解析成 flex: 0 1 auto
• 如果仍塌陷，临时补一行 min-width: 0 到中间区域——IE 对 flex 项的最小尺寸计算逻辑异常，这行能重置它的内部约束

grid 布局写法简洁但要注意兼容边界

用 display: grid 写三栏确实更直白：grid-template-columns: 240px 1fr 180px。但它在 Safari 10.1 之前、所有 IE 版本中完全不可用，不是“部分不支持”，是直接回退成块级流。

课游记AI

AI原生学习产品

下载

如果你的项目已明确放弃 IE 和老 Safari（比如只跑在 Electron 14+ 或 Chrome 90+ 环境），那 grid 是首选：代码少、逻辑平、响应式改起来也快。

• 不要混用 grid 和 flex 在同一容器——比如一边用 grid-column，一边又想靠 margin: auto 居中，行为不可控
• 1fr 不等于 100%：它按剩余空间等分，若左右设了 minmax(240px, 240px)，中间 1fr 就真只是“剩下的全部”
• 想让中间区域最小宽度可控？用 minmax(320px, 1fr)，比 JS 监听 resize 更轻量

.container {
  display: grid;
  grid-template-columns: 240px minmax(320px, 1fr) 180px;
}

为什么不用 float 或 position: absolute

这两种方案现在只剩历史包袱价值。它们的问题不是“写不出来”，而是“改一次就崩一次”。

float 的典型错误现象是：中间区域高度撑不开父容器，导致下方内容上浮；或者响应式断点里一改 width，就得同步调 clear 和 margin，极易漏掉某处。

position: absolute 更危险——它把中间区域从文档流踢出去，意味着所有相对定位、z-index 层级、甚至 scrollIntoView() 都可能失效。

• float 要配 overflow: hidden 或伪元素清除浮动，但后者在 Flex/Grid 容器里根本不起作用
• position: absolute 的 left/right 值一旦写死像素，就彻底失去响应能力；用百分比又得反复算减法，比如 left: 240px; right: 180px 在窄屏下直接重叠
• 两者都不支持 gap，想加间距只能靠 padding/margin，但 margin 会触发外边距合并，padding 又吃内容空间