flex:1在垂直方向生效需三个前提：父容器设display:flex、flex-direction:column、有确定高度（如100vh）；否则仅水平撑宽，不撑高。
flex:1 在垂直方向上根本不会起作用
直接说结论：flex:1 本身不区分方向，它只是让元素“占据剩余空间”，但前提是父容器必须启用 flex-direction: column，否则默认是水平排列，flex:1 只会撑宽，不会撑高。
常见错误现象：给子元素设了 flex:1，但高度没变，甚至整个区域还是“塌陷”的——大概率是忘了给父容器设 display: flex 和 flex-direction: column。
- 必须确保父容器有明确高度（比如
height: 100vh或固定值），否则子元素无“剩余空间”可分 -
flex:1等价于flex: 1 1 0，其中第三个参数0是关键：它让元素从零基础尺寸开始拉伸，避免内容影响分配逻辑 - 如果父容器高度依赖内容（如
height: auto），flex:1在垂直方向就失去意义
垂直平分布局的最小可行写法
不是“怎么用 flex:1”，而是“怎么搭出能用 flex:1 的垂直上下文”。以下是最简可靠组合：
body, html { margin: 0; height: 100%; }
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.item { flex: 1; }
注意三个硬性条件缺一不可：display: flex、flex-direction: column、父容器有确定高度。
- 不用
100%替代100vh：如果父级没高度，100%计算结果是0 - 多个
.item同时设flex:1，才会真正“平分”；只设一个，它会独占全部剩余空间 - 若需留白或间隙，优先用
gap而非margin，后者可能破坏 flex 分配逻辑
为什么有时候 flex:1 撑不满？检查这三点
典型表现：页面有空白，或者底部元素被截断。问题往往不在 flex:1 本身，而在它的“上游约束”被破坏。
- 父容器外边距或滚动条侵占空间：比如
body默认有8pxmargin，会导致100vh实际可用高度不足 - 子元素自身设置了
min-height或height，且值大于按比例计算出的高度，会强制撑开并打破均分 - CSS 重置不到位：某些 UI 库（如 Ant Design）会给组件加
min-height: auto，需要显式覆盖为min-height: 0
替代方案：当 flex:1 不适用时考虑什么
比如父容器高度动态、或需兼容老浏览器（IE10+ 以下），flex:1 就不是唯一解。
- 用
grid：父容器设display: grid; grid-template-rows: 1fr 1fr 1fr，更直观控制份数，且不依赖父容器高度声明 - 绝对定位 + top/bottom：适合固定数量子项，但响应性和可维护性差
- JavaScript 补位：仅当高度需实时响应窗口变化且 CSS 无法满足时才考虑，多数情况属于过早优化
真正容易被忽略的是：flex 布局中，flex:1 的行为完全由父容器的 flex-direction 和尺寸上下文决定，而不是它自己写了什么。写错一行 CSS，整套垂直分配就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
