怎样在CSS中运用盒模型实现垂直方向的平均分布？

最常用垂直平均分布方案是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，整个布局就偏移了。