使用 Flexbox 或 Grid 可实现左右固定、中间自适应布局。1. Flexbox 通过 display: flex 和 flex: 1 分配剩余空间，左右设固定宽度；2. Grid 使用 grid-template-columns: 200px 1fr 200px 定义列宽，1fr 占据中间剩余空间。两者现代浏览器支持良好，根据布局复杂度选择方案。
实现左右固定宽度、中间自适应的布局，是前端开发中的常见需求。使用现代 CSS 技术如 Flexbox 或 Grid 可以轻松完成这一目标，代码简洁且兼容性良好。
使用 Flexbox 实现
Flexbox 是一维布局模型，非常适合处理这种主轴方向上的空间分配问题。将容器设为 flex 布局后，中间区域可通过 flex: 1 自动填充剩余空间。
示例代码：
<div class="flex-layout">
<div class="left">左侧固定</div>
<div class="center">中间自适应</div>
<div class="right">右侧固定</div>
</div>
CSS 样式：
.flex-layout {
display: flex;
}
.left,
.right {
width: 200px; /* 固定宽度 */
background: #ddd;
}
.center {
flex: 1;
background: #eee;
}
说明：.center 使用 flex: 1 表示它会占据所有可用空间，而左右两侧保持设定宽度不变。
立即学习“前端免费学习笔记（深入）”；
使用 CSS Grid 实现
Grid 是二维布局系统，对这类结构化布局支持更直观。通过定义三列，左右列设为固定宽度，中间使用 fr 单位自适应。
示例代码：
<div class="grid-layout">
<div class="left">左侧固定</div>
<div class="center">中间自适应</div>
<div class="right">右侧固定</div>
</div>
CSS 样式：
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左右固定，中间占剩余空间 */
}
.left,
.center,
.right {
padding: 10px;
}
说明：1fr 表示“一份可分配空间”，整个布局会自动计算中间区域大小。
选择建议
两种方式都能高效实现该布局：
基本上就这些，不复杂但容易忽略细节。根据项目实际选择合适方案即可。
