最稳妥方案是用 display: flex 实现三栏布局，左右固定宽（flex: 0 0 宽度），中间自适应（flex: 1），兼容性好、语义清晰、响应式隐藏简单。
flex实现三栏布局：左右固定宽度，中间自适应
直接用 display: flex 最稳妥。不需要浮动、不需要绝对定位，也不依赖 calc() 或 JS 计算，浏览器兼容性好（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 全支持）。
核心思路是：父容器设 display: flex，左右子元素设固定 width 或 flex: 0 0 [宽度]，中间元素设 flex: 1 —— 它会自动撑满剩余空间。
- 别给中间元素设
width: 100%，会破坏 flex 的伸缩逻辑 - 左右元素用
flex: 0 0 200px比单纯写width: 200px更安全，能防止内容溢出时被压缩 - 如果左右栏需要响应式隐藏（比如移动端），直接对它们加
display: none，中间栏会自动占满全宽，无需额外调整
为什么不用 float 或 position？
float 布局要清浮动，且中间栏无法真正“自适应”——它得靠 margin-left/right 预留空间，一旦左右栏宽度变（比如字体缩放、多语言），就容易错位；position: absolute 更糟，中间栏脱离文档流，高度无法跟随左右栏变化，打印或屏幕阅读器支持也差。
而 flex 天然支持对齐、换行、顺序控制，flex-direction: column 还能快速转成垂直三栏，扩展成本低。
- 遇到
flex: 1不生效？检查父容器是否漏了display: flex或被其他样式重置（比如某些 CSS 重置库会设display: block !important） - IE10–11 对
flex: 1支持不一致，建议显式写成flex: 1 1 0，避免 IE 下收缩异常
实际项目中容易被忽略的细节
真实页面里，左右栏常含导航、侧边栏、广告位，往往有内边距、边框、阴影。这些都会影响实际占用宽度，但 flex 默认按 content-box 计算，容易导致中间栏被挤窄。
- 统一给所有子元素加
box-sizing: border-box，让 padding/border 不撑大 flex 基础尺寸 - 如果左右栏用了
min-width或max-width，记得和flex-basis协同考虑，否则可能触发意外换行 - 中间栏若含长文本或表格，加
min-width: 0防止它强行撑宽（flex 默认最小宽度是内容宽度）
示例关键代码：
.container { display: flex; }
.left { flex: 0 0 240px; }
.right { flex: 0 0 300px; }
.main { flex: 1; min-width: 0; }
要不要用 grid 替代 flex？
可以，但没必要。grid 更适合二维布局（比如网格卡片、复杂表单），而左右固定+中间自适应是一维主轴问题，flex 语义更准确、代码更轻量、调试更直观。
除非你已经在用 grid 做整体布局框架，否则为三栏单独切到 grid，反而增加维护负担。
-
grid-template-columns: 240px 1fr 300px看似简洁，但当某栏需动态显示/隐藏时，得配合grid-template-columnsJS 修改或媒体查询，不如 flex 的display: none直观 - 旧版 Safari（
中间栏的“自适应”不是指像素级弹性，而是内容驱动下的合理伸缩。盯住 flex-basis 和 min-width 这两个点，基本不会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
