17370845950

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 这两个点。