侧边栏弹性布局可通过flex-grow与flex-shrink配合实现，1. 将容器设为display: flex，侧边栏固定宽度，主内容区设flex-grow: 1以填充剩余空间；2. flex-grow控制扩展比例，数值越大占用空间越多；3. flex-shrink控制压缩比例，设为0可防止侧边栏被压缩；4. 推荐使用flex简写，如sidebar设flex: 0 0 200px，main-content设flex: 1 1 0，确保侧边栏固定、主内容区灵活响应。
使用Flexbox制作侧边栏弹性布局时，flex-grow 与 flex-shrink 的配合能实现内容区域自动填充、侧边栏保持固定或按比例伸缩的效果。关键在于合理设置主轴方向和子元素的弹性属性。
1. 基础结构：创建Flex容器
将父容器设为 display: flex，通常侧边栏和主内容区水平排列：
.container {
display: flex;
height: 100vh; /* 占满视口高度 */
}
.sidebar {
width: 200px; /* 固定宽度侧边栏 */
}
.main-content {
flex-grow: 1; /* 自动填充剩余空间 */
}
此时，主内容区会自动拉伸填满剩余宽度，侧边栏保持200px不变。
2. 使用 flex-grow 控制扩展能力
flex-grow 定义子元素在有剩余空间时的放大比例。默认值为0，表示不扩展。
立即学习“前端免费学习笔记（深入）”；
- 设置
flex-grow: 1的元素会占据所有可用空间 - 多个元素设置不同值时，按比例分配（如1和2，则后者得2/3空间）
例如让主内容区在多列布局中占更大比例：
.main-content { flex-grow: 3; }
.aside { flex-grow: 1; }
3. 使用 flex-shrink 控制压缩行为
flex-shrink 控制子元素在空间不足时的收缩比例，默认为1。
- 设为0时，元素不会被压缩（适合保护侧边栏最小宽度）
- 设为大于0的值时，按比例缩小
防止侧边栏被压扁：
.sidebar {
width: 200px;
flex-shrink: 0; /* 禁止压缩 */
}
.main-content {
flex-grow: 1;
flex-shrink: 1;
}
4. 综合使用 flex-grow 与 flex-shrink
实际开发中推荐使用简写属性 flex，格式为：flex: flex-grow flex-shrink flex-basis
.sidebar {
flex: 0 0 200px; /* 不扩展、不压缩、基础宽度200px */
}
.main-content {
flex: 1 1 0; /* 可扩展、可压缩、从0开始增长 */
}
这种写法确保侧边栏固定，主内容区灵活响应容器变化。
基本上就这些。掌握 flex-grow 与 flex-shrink 的配合，再结合 flex-basis 或 width，就能轻松实现各种侧边栏布局需求。
