最简洁高效方案是父容器 display: flex，左右栏设 flex: 0 0 [宽度]，中间栏设 flex: 1 并加 min-width: 0 防溢出；比例分配可用 flex-grow；IE9-需回退 float 或 table-cell。
左右固定宽度、中间自适应，用 Flex 实现最简洁高效——核心是给左右两侧设置固定 width 或 flex: 0 0 [宽度]，中间项设为 flex: 1，让其自动填充剩余空间。
左右固定宽度，中间 flex: 1 自适应
这是最常用也最推荐的方式。父容器设 display: flex，左、右区域用 flex: 0 0 [具体像素或百分比] 锁定尺寸，中间区域用 flex: 1 占满剩余空间。
- 左栏：
flex: 0 0 200px（不缩放、不放大、固定 200px） - 右栏：
flex: 0 0 160px - 中间栏：
flex: 1（等价于flex: 1 1 0，基于 0 基础宽度弹性撑开）
注意 min-width 可能导致换行或溢出
如果中间内容本身有最小宽度（比如一段长文本、表格、固定宽的组件），而容器总宽又较小，flex: 1 默认不会压缩到低于内容的 min-width，可能造成整体溢出或布局错乱。
-
解决方法：给中间区域加
min-width: 0，允许它压缩到 0（配合word-break: break-word或overflow-wrap: break-word处理长文本） - 若需强制换行，可加
white-space: normal
用 flex-grow 按比例分配（进阶场景）
当不需要“绝对固定”左右宽度，而是希望按比例占用空间（例如左:中:右 = 1:3:1），可用 flex-grow：
- 左栏：
flex: 1 - 中间栏：
flex: 3 - 右栏：
flex: 1 - 此时三者按 1:3:1 的比例分配父容器剩余空间（前提是没设固定 width）
兼容性与 fallback（如需支持旧版浏览器）
Flex 布局在现代浏览器中支持良好（IE10+ 支持带 -ms- 前缀的 flex）。若必须兼容 IE9 及以下，建议改用 float + margin 或 table-cell 方案，但会丧失响应性和语义清晰度。
实际开发中，只要目标环境明确支持 Flex，就优先使用 flex: 0 0 [固定值] + flex: 1 组合，简洁、健壮、易维护。
