使用Flexbox可轻松实现侧边栏与主内容区的自适应布局。通过设置display: flex启用弹性布局后，利用flex-grow按比例分配剩余空间，如侧边栏flex-grow: 1、主内容flex-grow: 3，使主内容占据更多宽度；当空间不足时，通过flex-shrink控制压缩比例，如侧边栏设为2、主内容为1，使侧边栏更优先被压缩；结合flex-basis定义基准宽度，并使用flex简写属性（如flex: 1 2 200px）统一设置三个值，实现精准的空间分配与响应式效果。
在网页布局中，主次内容区域（如侧边栏+主内容区）很常见。使用 Flexbox 可以轻松实现这种结构，并通过 flex-grow 和 flex-shrink 精确控制它们的空间分配比例。
基本结构与Flex容器设置
先搭建HTML结构：
然后让容器启用Flex布局：
.container {display: flex;
}
这样两个子元素就会水平排列，容器会尝试将它们放在同一行。
立即学习“前端免费学习笔记（深入）”；
使用flex-grow分配剩余空间
当容器宽度大于子元素总宽度时，剩余空间可以按比例分配。flex-grow 定义了元素扩展的能力。
比如希望主内容占更多宽度：
.sidebar {flex-grow: 1;
}
.main-content {
flex-grow: 3;
}
这表示：剩余空间被分为4份，侧边栏拿1份，主内容拿3份。即使初始宽度不同，最终也会按比例拉伸填满容器。
使用flex-shrink控制压缩比例
当容器太窄、子元素放不下时，flex-shrink 决定谁缩得更狠。默认值是1，表示都可压缩。
若想让主内容优先保留空间，侧边栏更“能屈”：
.sidebar {flex-shrink: 2;
}
.main-content {
flex-shrink: 1;
}
这意味着：当空间不足，侧边栏会被压缩得更多，主内容受影响较小。
结合flex-basis设置基准宽度
单独用 flex-grow/shrink 不够直观，通常配合 flex-basis 使用，它定义元素的初始大小。
完整写法推荐使用 flex 简写属性：
.sidebar {flex: 1 2 200px;
}
.main-content {
flex: 3 1 600px;
}
这三个值分别对应：flex-grow、flex-shrink、flex-basis。浏览器会基于基础宽度计算增长或收缩比例。
基本上就这些。通过组合 flex-grow 和 flex-shrink，你可以灵活控制主次区域如何响应容器变化，实现真正自适应的布局。不复杂但容易忽略细节。
