如何在CSS中实现左右固定宽度中间自适应布局_Flex/Grid结合

使用 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 单位自适应。

博思AIPPT

博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。

117

查看详情

<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 表示“一份可分配空间”，整个布局会自动计算中间区域大小。

选择建议

两种方式都能高效实现该布局：

• 若整体布局是一行或多列的线性排列，优先使用 Flexbox
• 若页面结构复杂、涉及多维度对齐（如网格状），推荐使用 Grid
• 现代浏览器均良好支持两者，无需额外兼容处理

基本上就这些，不复杂但容易忽略细节。根据项目实际选择合适方案即可。

以上就是如何在CSS中实现左右固定宽度中间自适应布局_Flex/Grid结合的详细内容，更多请关注php中文网其它相关文章！