CSS盒模型实现垂直方向平均分布的方法

先说结论：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，整个布局就偏了——这些细节值得花时间去理清。