使用Flexbox可轻松实现一侧固定、一侧自适应的布局：将父容器设为display: flex，固定列设置width或flex: 0 0 200px，自适应列设置flex-grow: 1或flex: 1，即可让主区域自动填充剩余空间，且兼容性良好，需注意避免width: 100%冲突及合理处理内容溢出。
在现代网页布局中，经常需要实现一侧固定宽度、另一侧自适应宽度的排布效果。比如左侧菜单栏宽度固定为200px，右侧内容区域占据剩余空间。使用 Flexbox 配合 flex 和 width 可以轻松实现这种混合布局。
基本原理：Flex容器与弹性伸缩
将父容器设置为 display: flex，其子元素会默认沿主轴排列，并根据可用空间进行伸缩。关键在于控制哪些元素“固定”、哪些“自适应”。
固定宽度列直接设置 width 或 flex-basis；自适应列通过 flex-grow 占据剩余空间，同时可配合 flex-shrink 和 flex-basis 控制行为。
实现方式一：固定列设 width，自适应列设 flex-grow
这是最直观的方式：
立即学习“前端免费学习笔记（深入）”；
- 固定宽度列设置具体 width（如 200px）
- 自适应列设置 flex-grow: 1，自动撑满剩余空间
- 两者都保留在同一行，无需额外设置 flex-shrink 或 flex-basis
.container {
display: flex;
}
.sidebar {
width: 200px; /* 固定宽度 */
background: #f0f0f0;
}
.main {
flex-grow: 1; /* 自动填充剩余空间 */
background: #e0e0e0;
}
此时 .main 会随着容器变大而变宽，.sidebar 始终保持 200px。
实现方式二：使用 flex 属性简写控制更精细行为
使用 flex 简写可以同时定义 grow、shrink、basis。例如让主区域从“0”开始增长：
- flex: 1 等价于 flex: 1 1 0%，表示按比例分配剩余空间，基础尺寸为 0%
- 若希望主区域基于内容但又能扩展，可设 flex: 1 1 auto
- 固定列可写为 flex: 0 0 200px，表示不增长、不收缩，宽度为 200px
.container {
display: flex;
}
.sidebar {
flex: 0 0 200px; /* 不伸缩，固定 200px */
}
.main {
flex: 1; /* 自动伸展 */
}
这种方式避免了某些浏览器下基于内容宽度导致的换行或挤压问题。
注意事项与兼容性
虽然 Flexbox 在现代浏览器中支持良好，但仍需注意：
- 避免在自适应列上设置 width: 100%，这可能与 flex 行为冲突
- 如果子元素包含内联内容（如文本），确保 white-space 和 overflow 设置合理
- 在老版本移动端 WebView 中，建议加上 -webkit-flex 前缀（虽然现在大多数已不需要）
基本上就这些。用好 flex-grow 和 width 的组合，就能灵活处理固定与自适应混排场景。不复杂但容易忽略细节。
