Flex布局实现侧边栏固定、内容区自适应：侧边栏设flex: 0（即flex-grow: 0、flex-shrink: 0、flex-basis: auto），配合固定宽度或内容撑开；内容区设flex: 1（即flex-grow: 1、flex-shrink: 1、flex-basis: 0），并确保父容器display: flex且内容区min-width: 0。
侧边栏固定、内容区自适应，用 Flex 布局确实很简单：侧边栏设 flex: 0（不伸缩、不收缩、按自身宽度显示），内容区设 flex: 1（占满剩余空间），就能自然实现。
侧边栏 flex: 0 的实际效果
flex: 0 是 flex: 0 0 auto 的简写，意味着：
- 不放大（flex-grow: 0）
- 不缩小（flex-shrink: 0）
- 基准尺寸按内容或显式宽高（flex-basis: auto）
所以只要给侧边栏设个固定宽度（比如 width: 240px），或者靠内容撑开，它就不会被挤压或拉伸。
内容区 flex: 1 的关键作用
flex: 1 等价于 flex: 1 1 0，重点在：
立即学习“前端免费学习笔记（深入）”；
- 允许放大填满剩余空间（flex-grow: 1）
- 允许缩小（flex-shrink: 1），但通常不会缩——因为有足够空间
- 初始主轴尺寸为 0，完全让出空间给侧边栏后，再“抢”剩下的所有空间
这样即使窗口缩放，内容区也会实时响应，始终贴着侧边栏右侧延伸。
别漏掉父容器的必要设置
Flex 生效的前提是父容器开启 Flex 布局：
- 必须设
display: flex - 默认主轴是水平（row），适合左右布局；如需上下（侧边栏在上），改用
flex-direction: column - 推荐加上
min-width: 0到内容区（防止内部长内容溢出破坏布局）
基本上就这些。不复杂，但容易忽略父容器 display 和内容区 min-width 这两个点。
