答案是使用Flexbox通过flex-basis与flex-grow组合实现自适应布局：容器设display: flex后，侧边栏设flex-basis: 200px、flex-grow: 0、flex-shrink: 0以固定宽度，内容区设flex-basis: 0、flex-grow: 1以填充剩余空间；若需按比例分配，如1:3，则两者flex-basis均为0，flex-grow分别设1和3，按权重分配剩余空间。
使用 Flexbox 实现侧边栏和内容区的自适应布局，关键在于合理利用 flex-basis 与 flex-grow 的组合。通过这种方式，可以灵活控制各区域的基础宽度和剩余空间的分配比例。
基本结构设定
先构建一个包含侧边栏和主内容区的容器：
内容区
启用 Flexbox 布局
将容器设为 flex 模式，并设置主轴方向为水平：
.container {
display: flex;
}
设置侧边栏固定宽度，内容区自适应
若希望侧边栏保持固定宽度（如 200px），而内容区填充剩余空间，可这样设置：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏：设置 flex-basis: 200px，flex-grow: 0（不扩展）
- 内容区：设置 flex-basis: 0 或留空，flex-grow: 1（占据剩余空间）
.sidebar {
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0; /* 防止压缩 */
}
.content {
flex-grow: 1;
flex-basis: 0;
}
这里 flex-basis 定义了初始主轴尺寸，flex-grow 决定多余空间的拉伸比例。内容区的 flex-basis: 0 并配合 flex-grow: 1，使其能充分利用剩余宽度。
多个区域按比例分配空间
如果需要多个内容区域按比例伸展，比如侧边栏占 1/4，内容区占 3/4，可调整 flex-grow 的值：
- 侧边栏：flex-basis: 0, flex-grow: 1
- 内容区：flex-basis: 0, flex-grow: 3
此时两者都从 0 开始，按 1:3 的比例瓜分容器空间，实现动态等比自适应。
基本上就这些。掌握 flex-basis 提供起点、flex-grow 控制扩张的逻辑，就能灵活实现各种自适应布局。不复杂但容易忽略细节。
