flex是最直接可靠的方案，grid次之；用flex时容器设display: flex，中间列固定宽+flex-shrink: 0，左右列用flex: 1均分剩余空间；grid则用grid-template-columns: 1fr 320px 1fr；避免table和absolute因等高、定位失控等问题。
中间列固定、两侧等宽的布局，flex 是最直接可靠的方案，grid 次之；用 float 或 absolute 容易失控，不推荐。
用 flex 实现：左侧 + 中间固定 + 右侧，三者独立控制
核心是给容器设 display: flex，中间列用固定宽度（如 width: 320px），左右列用 flex: 1 占满剩余空间。注意：左右列必须是同级兄弟元素，不能嵌套。
-
flex: 1在左右列上表示“均分剩余可用宽度”，不是按比例分配，所以两侧自然等宽 - 中间列不能设
flex相关缩放属性（如flex-grow: 0），否则可能被压缩或撑开 - 若中间列内容超宽，需加
min-width: 320px防止被压扁；也可用flex-shrink: 0显式禁缩 - 所有列高度不一致时，想对齐顶部就加
align-items: flex-start到容器上
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.center {
width: 320px;
flex-shrink: 0;
}
用 grid 实现：语义清晰但需明确轨道尺寸
适合结构稳定、列数固定的场景。关键在 grid-template-columns 的写法 —— 两侧用 1fr，中间用固定值，顺序即列序。
-
grid-template-columns: 1fr 320px 1fr表示左/右各占 1 份剩余空间，中间固定 320px - 如果中间列需要最小宽度而非绝对固定，可改用
minmax(320px, 320px)，效果相同但更显意图 - 注意：不要混用
fr和百分比（如50%），否则总宽可能溢出或收缩异常 - 该写法默认三列同行，无需额外设置
grid-auto-flow
为什么不用 table 或 position: absolute？
这两种方式在该需求下会引入不可控副作用：
立即学习“前端免费学习笔记（深入）”；
-
<table>强制等高行为，中间列固定后，左右列高度会被拉平，破坏内容自然流；table-layout: fixed也无法单独锁定中间列宽度 -
position: absolute要求父容器position: relative，且左右列需手动计算left/right值，响应式时极易错位，也无法随内容自动撑高 - 两者都不支持
flex-wrap或grid-auto-rows这类现代流式扩展，后续加滚动、换行、自适应都得重写
容易被忽略的兼容性与边界情况
实际部署时，这几个点常导致布局“看起来正常，一动就崩”：
- 父容器没设
width或max-width，尤其在嵌套flex容器里，会导致子项计算宽度失准 - 中间列内有
inline-block元素或未清除的空白字符，可能撑宽整个列，建议中间列加overflow: hidden或font-size: 0控制 - 在 Safari 15.4 之前，
flex: 1对min-width为 0 的元素表现异常，稳妥起见可给左右列加min-width: 0 - 如果中间列要 sticky 吸顶，必须确保它不在
transform容器内（比如被scale()包裹），否则position: sticky失效
