先说结论：CSS中实现垂直方向的平均分布，其实主要就这几个核心方案。很多开发者在实际编码时会踩坑，因为每个方案都有相当具体的生效条件，缺少一个属性效果就可能天差地别。
flex-direction: column + justify-content: space-between 是最常见的做法
这是最直观的CSS垂直布局方案，兼容性也非常优秀——Chrome 21以上、Firefox 20以上、Safari 6.1以上都能稳定支持。适合父容器高度已知、子元素数量固定且不需要换行的场景。
很多人在这里卡住的常见原因是什么？给子元素设置了 justify-content: space-between，结果它们仍然挤在顶部一动不动。问题多半出在父容器：要么忘了添加 display: flex，要么忘记加上 flex-direction: column。主轴方向一旦错误，效果自然对不上。
- 父容器高度是硬性要求——必须给它一个明确的高度（比如
height: 400px或min-height: 100vh），否则“平均分布”根本没有可分配的空间。 space-between的效果是首尾子元素贴紧容器边缘，中间的子元素等间隔排列。如果希望所有子元素（包括首尾）与容器边距都相等，换成space-around或space-evenly即可。- 注意子元素上的
margin，尤其是上下方向的margin-top或margin-bottom。Flex 布局会忽略它们对主轴间距的计算，加了反而可能干扰布局效果。
多行垂直等距要用 align-content，而不是 justify-content
当子元素因为宽度限制自动换行（flex-wrap: wrap）时，情况就不同了。这时 justify-content 只能控制单行内部的间距，真正负责“行与行之间垂直等距”的属性是 align-content。
举个例子：你做一个卡片网格，每行三个，一共八个卡片，自动排成三行。希望这三行在父容器里均匀分布——此时 align-content: space-between 才是正确答案。
- 必须同时设置
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，那属于2009年的旧版Flexbox草案。现代浏览器早已不提供支持——Chrome 29以上、Firefox 28以上完全不识别，强行使用会出现布局断裂或静默失效。
迁移的成本其实很低：
- 把
display: -webkit-box改为display: flex - 把
-webkit-box-flex: 1改为flex: 1 - 删掉所有
-moz-box、-o-box等老旧前缀 - 别忘了加上
flex-direction: column（如果原来意图是垂直排列）
归根结底，CSS 垂直平均分布从来不是靠某个单一属性就能搞定的。它依赖父容器的高度约束、Flex轴的准确方向、以及对 justify-content 和 align-content 适用边界有清醒的判断。写错一行CSS，整个布局就偏了——这些细节值得花时间去理清。
