Flex布局左右固定，中间自适应方法

本文深入介绍了如何利用 Flexbox 的 `flex: 1` 特性，以极简、语义化且响应式友好的方式实现“左右固定宽度、中间自适应填充”的经典三栏布局——只需将容器设为 `display: flex`，左右两侧用 `flex: 0 0 200px` 锁定尺寸，中间区域一键 `flex: 1` 占满剩余空间，彻底摆脱浮动清除、负边距或绝对定位的繁琐与脆弱；方案天然支持内容垂直居中、最小宽度约束、响应式隐藏侧栏等实际需求，代码精炼、逻辑清晰、浏览器兼容性优秀（IE11+），是现代前端布局中高效可靠、开箱即用的首选实践。

用 flex: 1 实现左右固定、中间自适应的布局，是 Flexbox 最简洁可靠的方案之一。关键在于把容器设为 display: flex，左右两侧设置固定宽度（或 flex: 0 0 宽度），中间区域用 flex: 1 占满剩余空间。

基础 HTML 结构

保持语义清晰，结构简单：

  
  
中间内容（自适应）
  

核心 CSS 写法

只需几行样式即可生效：

.container {
  display: flex;
}
.left, .right {
flex: 0 0 200px; / 不缩放、不增长，固定 200px /
background: #eee;
}
.center {
flex: 1; / 自动占据剩余所有空间 /
background: #d0e7ff;
}

说明：

• flex: 0 0 200px 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px，确保左右不随内容或容器变化而拉伸/压缩
• flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，优先按比例分配剩余空间（此处唯一子项，占满）
• 无需设置 width 或 margin，无浮动、无负边距，天然支持响应式

常见增强需求处理

实际项目中可能需要微调：

• 中间最小宽度限制：给 .center 加 min-width: 300px，防止过窄时内容挤压
• 左右可选隐藏（响应式）：用 display: none 隐藏某侧后，flex: 1 的中间区会自动撑满全宽，无需额外调整
• 内部内容垂直居中：在 .center 上加 display: flex; align-items: center; justify-content: center

为什么不用 float 或 absolute？

传统方式问题明显：

• float 需要清除浮动，中间需 margin 预留空间，缩放时易错位
• position: absolute 脱离文档流，中间区域需手动计算 left/right，响应式困难
• Flex 方案天然流式、语义清晰、维护成本低，现代浏览器兼容性良好（IE11+ 支持 flex: 1）

基本上就这些。只要记住「容器 flex，两侧锁死，中间 flex: 1」，三行关键样式就能稳稳搞定。

今天关于《Flex布局左右固定，中间自适应方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！