flex-grow是解决页面区块比例调节不精准最直接有效的方式，它按权重自动分配剩余空间，无需固定宽高，比百分比更灵活响应式。
用 flex-grow 是解决页面区块比例调节不精准最直接有效的方式——它不依赖固定宽高，而是按权重自动分配剩余空间，比单纯设百分比或 width 更灵活、更响应式。
理解 flex-grow 的三个关键值
flex-grow 接收一个无单位数字，表示该元素在容器剩余空间中“能拿走几份”。它的实际占比由所有子项的 flex-grow 值总和决定：
- 如果只有1个子项设为
flex-grow: 2，其余为0，它将独占全部剩余空间 - 两个子项分别设为
flex-grow: 1和flex-grow: 3，它们按 1:3 分配剩余空间（即 25% : 75%） - 设为
flex-grow: 0表示不参与伸缩，保持自身内容宽度（类似传统块级行为）
避免常见误操作
很多比例“调不准”其实不是 flex-grow 不好用，而是被其他样式干扰了：
-
先清掉 width / max-width：如果给子项设了
width: 300px或max-width: 100%，flex-grow可能被压制，优先让宽度卡死 -
检查父容器是否启用了 Flex 布局：必须有
display: flex或display: inline-flex，且方向默认是row（横向）；纵向布局需加flex-direction: column -
慎用 flex-shrink：若同时设了
flex-shrink: 0且内容超长，可能撑破容器，导致比例错乱
实用比例组合速查
日常开发中高频出现的比例，可直接套用（假设父容器为 display: flex）：
-
6:4（主次分明） → 主区
flex-grow: 6，侧栏flex-grow: 4 -
等宽三栏 → 三个子项都设
flex-grow: 1 -
固定侧边栏 + 自适应主内容 → 侧栏
flex-grow: 0; width: 240px，主内容flex-grow: 1
配合 min-width/max-width 微调体验
flex-grow 控制的是“剩余空间怎么分”，但极端屏幕下仍需兜底：
- 给主内容区加
min-width: 320px，防止在小屏上被压缩到无法阅读 - 给导航栏加
max-width: 280px，避免在大屏上过度拉宽破坏布局节奏 - 这些限制不会影响
flex-grow的计算逻辑，只是在最终渲染时做边界保护
