本文介绍在垂直 Flex 布局中，如何使多个子元素（如 、 等）自动均分父容器的剩余高度，同时保留底部固定内容（如页脚）不参与等分，实现灵活、响应式的高度分配。
本文介绍在垂直 flex 布局中，如何使多个子元素（如 `
`、`
` 等）自动均分父容器的**剩余高度**，同时保留底部固定内容（如页脚）不参与等分，实现灵活、响应式的高度分配。
在构建垂直布局（例如仪表盘面板、卡片式内容区或表单区域）时，常需满足如下需求：
- 顶部若干内容块需均分父容器除去页脚后的全部剩余高度；
- 底部页脚（如操作栏、状态提示）应仅占据自身内容所需高度，不拉伸、不压缩；
- 整体结构需具备良好的可维护性与扩展性，支持任意数量的均分项。
此时，CSS Flexbox 是最简洁可靠的解决方案。核心思路是：
- 外层容器设为 flex-direction: column，形成纵向主轴；
- 中间内容区（.innerContainer）设置 flex: 1，使其弹性占据所有剩余空间；
- 内部子元素（如
、
）通过 flex-grow: 1 实现等比例拉伸，自动均分 .innerContainer 的高度。以下是完整可运行的示例代码：
<div class="container"> <div class="innerContainer"> <p>This should take equal height (full height of parent equally splitted)</p> <p>This should take equal height (full height of parent equally splitted)</p> </div> <p class="footer">Outer Paragraph, which takes only needed space</p> </div>.container { height: 200px; display: flex; flex-direction: column; border: 1px dotted black; } .innerContainer { flex: 1; /* 关键：占据所有剩余空间 */ display: flex; flex-direction: column; border: 1px dashed black; } /* 方案一：精确控制段落元素 */ .innerContainer > p { flex-grow: 1; margin: 0; /* 避免默认外边距干扰高度计算 */ padding: 8px; } /* 方案二（更通用）：适配任意直接子元素 */ /* .innerContainer > * { flex-grow: 1; margin: 0; padding: 8px; } */ .footer { flex: 0 0 auto; /* 不增长、不收缩，仅按内容自适应高度 */ border: 1px solid black; padding: 6px; margin: 0; }✅ 关键要点说明：
- flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，确保 .innerContainer 在纵向布局中“吃掉”除 .footer 外的所有剩余空间；
- flex-grow: 1 应用于 .innerContainer 的直接子元素，而非 .innerContainer 本身——这是实现均分的决定性一步；
- 推荐使用 flex: 0 0 auto 明确声明页脚不参与弹性缩放，比 flex: 0 1 auto 更稳健（避免意外收缩）；
- 若子元素含内边距、边框或外边距，务必重置 margin（尤其是
默认上下边距），否则会影响高度均分精度；
- 此方案天然支持动态增删子项：添加第三个
，三者将自动均分 .innerContainer 高度，无需修改 CSS。
? 进阶提示：若需为均分项添加最小高度限制或间距，可结合 min-height 与 gap（需父容器为 display: flex 且浏览器支持）：
.innerContainer { display: flex; flex-direction: column; gap: 4px; /* 子项间统一间距，不占用 flex-grow 计算 */ } .innerContainer > * { flex-grow: 1; min-height: 32px; /* 防止内容过少时塌陷 */ }该方案兼容所有现代浏览器（Chrome 29+、Firefox 28+、Safari 9+、Edge 12+），语义清晰、代码精简，是实现“剩余空间均分”场景的推荐实践。
