用 flex: 1 可实现左右固定、中间自适应布局：容器设 display: flex，左右用 flex: 0 0 200px 固定宽度，中间用 flex: 1 占满剩余空间，无需浮动或绝对定位，语义清晰且响应式友好。
用 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」，三行关键样式就能稳稳搞定。
