最常用垂直平均分布方案是flex-direction: column配合justify-content: space-between，需父容器设display: flex、明确高度且子元素数量固定；多行时用align-content，单行无效；flex: 1垂直撑满须满足三条件：flex容器、column方向、确定高度。
flex-direction: column + justify-content: space-between 最常用
这是最直接、兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+）的垂直平均分布方案，适用于已知父容器高度、子元素数量固定且不换行的场景。
常见错误现象：justify-content: space-between 没生效，子元素还是挤在顶部——大概率是父容器没设 display: flex 或漏了 flex-direction: column。
- 父容器必须有明确高度（如
height: 400px或min-height: 100vh），否则“平均分布”无空间可分 -
justify-content: space-between会让首尾子元素贴边，中间等距；若要全部等距（含首尾到边距），改用space-around或space-evenly - 子元素不能设
margin干扰计算，尤其避免margin-top/bottom—— Flex 会忽略它们对主轴间距的影响
多行垂直等距要用 align-content，不是 justify-content
当子元素因宽度限制自动换行（flex-wrap: wrap）时，justify-content 只控制单行内间距，真正管“行与行之间垂直等距”的是 align-content。
典型使用场景：网格布局中，每行 3 个卡片，总共 8 个 → 自动排成 3 行，希望这 3 行在父容器内垂直均匀分布。
- 必须同时设置
display: flex、flex-wrap: wrap和父容器明确高度（如height: 600px） -
align-content: space-between：第一行顶边、最后一行底边，中间行等距 -
align-content: space-evenly：所有行（含首尾）到上下边距相等，视觉更均衡 -
align-content对单行无效，此时它被忽略——别指望它解决单列布局问题
flex: 1 垂直撑满的前提条件很严格
flex: 1 在垂直方向能“平均分配剩余高度”，但极易失效，不是加了就起作用。
常见错误现象：给三个子元素都设 flex: 1，结果高度为 0 或完全不均等——本质是父容器没满足三个硬性条件。
- 父容器必须有
display: flex且flex-direction: column - 父容器必须有确定高度（
height或min-height），height: auto下flex: 1无意义 -
flex: 1等价于flex: 1 1 0，第三个参数0是关键：它让元素从 0 高度开始拉伸，避免内容高度干扰分配 - 如果某个子元素有固定高度（如
height: 80px），其他设flex: 1的元素会平分“剩余高度”，而非全部等高
box-flex 已淘汰，别再用
display: box 和 -webkit-box-flex 是旧版 Flexbox（2009草案），现代浏览器已弃用。Chrome 29+、Firefox 28+ 完全不支持，强行使用会导致布局断裂或静默失效。
如果你在老项目代码里看到它，迁移成本其实很低：
- 把
display: -webkit-box改成display: flex - 把
-webkit-box-flex: 1改成flex: 1 - 删掉所有
-moz-box、-o-box等前缀 - 补上
flex-direction: column（如果原意是垂直）
真正容易被忽略的是：垂直平均分布从来不是单靠一个属性就能搞定的事，它依赖父容器的高度约束、Flex 轴向定义、以及对 justify-content/align-content 适用边界的清醒判断——写错一行 CSS，整个布局就偏移了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
