使用Flexbox可高效实现一侧固定、一侧自适应的布局。将父容器设为display: flex，固定侧设置具体width（如200px），自适应侧设置flex: 1，即可自动填充剩余空间；结合min-width、max-width可进一步控制响应范围，避免溢出或失衡，同时注意避免width: 100%冲突及启用box-sizing: border-box确保尺寸准确。
在现代网页开发中，经常需要实现一侧固定宽度、另一侧自适应的混合布局。比如左侧导航栏宽度固定为200px，右侧内容区域占据剩余空间。使用 Flexbox 配合 width 可以高效实现这种效果，且兼容性良好，代码简洁。
Flexbox 布局基础设置
要实现固定与自适应混合布局，父容器需启用 Flexbox。通过 display: flex 启用弹性布局后，子元素会自动沿主轴排列，此时可控制它们如何分配空间。
关键点在于：固定宽度的元素设置具体 width，自适应元素利用 flex 属性填充剩余空间。
示例结构：<div class="container"><div class="sidebar">左侧固定</div><div class="content">右侧自适应</div></div>
固定宽度侧边栏 + 自适应主内容
将侧边栏设置固定宽度（如 200px），主内容区域使用 flex: 1 占据剩余空间。这种方式无需计算百分比，浏览器自动处理伸缩。
立即学习“前端免费学习笔记（深入）”；
CSS 示例：
.container {
display: flex;
height: 100vh; /* 撑满视口高度，可选 */
}
<p>.sidebar {
width: 200px; /<em> 固定宽度 </em>/
background-color: #f0f0f0;
}</p><p>.content {
flex: 1; /<em> 自动伸缩，填满剩余空间 </em>/
background-color: #fff;
}</p>这里 flex: 1 等价于 flex-grow: 1, flex-shrink: 1, flex-basis: 0%，但实际表现中，它会让元素基于可用空间扩展。即使没有设置 width，也能正确填充。
结合 width 与 flex 控制更复杂场景
某些情况下，你可能希望某个区域有最小宽度或最大宽度限制，同时仍参与弹性布局。此时可结合 width 与 flex 属性精细控制。
例如：主内容区至少 300px，最多不超过 800px
.content {
flex: 1;
min-width: 300px;
max-width: 800px;
}
这样既保持自适应特性，又避免在极端屏幕下布局失衡。而固定侧边栏仍保持 width 设置不变，不受伸缩影响。
注意事项与常见问题
使用 Flexbox 实现混合布局时，注意以下几点：
- 避免在自适应元素上设置 width: 100%，这可能与 flex 行为冲突，导致溢出或无法收缩
- 若子元素包含内边距或边框，建议启用 box-sizing: border-box，确保尺寸计算一致
- 在嵌套布局中，确保父容器正确设置了 display: flex，否则 flex 属性无效
基本上就这些。Flexbox 天然适合这类混合布局，配合 width 使用灵活又直观，无需浮动或定位 hack，维护成本低，响应式支持也好。不复杂但容易忽略细节。
