用 flex: 1 可实现左右固定、中间自适应布局：容器设 display: flex，左右用 flex: 0 0 200px 固定宽度，中间用 flex: 1 占满剩余空间，无需浮动或绝对定位，语义清晰且响应式友好。

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

基础 HTML 结构

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

<div class="container">
  <aside class="left">左侧</aside>
  <main class="center">中间内容（自适应）</main>
  <aside class="right">右侧</aside>
</div>

核心 CSS 写法

只需几行样式即可生效：

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

说明：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 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」，三行关键样式就能稳稳搞定。