HTML中无“垂直分散对齐”标准属性；justify-content: space-between在垂直方向仅当flex-direction: column时作用于主轴，align-content用于多行flex容器的行间垂直等距分布，单行则需margin: auto或定位实现。
HTML 里没有“垂直分散对齐”这个标准 CSS 属性或行为，justify-content: space-between 在垂直方向上只对 flex 容器的侧轴（即 flex-direction: column 时的主轴）生效，但浏览器不会自动把元素“撑开填满容器高度再等距分布”——它只按内容顺序排列，不主动分配剩余空间。所谓“垂直分散”，本质是**手动控制元素在容器内的纵向位置关系**，得靠布局模型选对、属性配对、留白设计三者配合。
用 flex + align-content 实现多行元素垂直等距分布
当容器内有多个 flex 项目（比如几段 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或几个 <div>），且它们自然换行（<code>flex-wrap: wrap），才能用 align-content 控制行与行之间的垂直间距：
-
align-content: space-between：首行顶边、末行底边贴容器边界，中间行等距； -
align-content: space-around：每行上下留相同空白，视觉更宽松； -
align-content: space-evenly：所有行（含首尾）之间间隙完全相等； - ⚠️ 前提是容器必须有明确高度（
height或min-height），且子项总高度小于容器高度，否则无法产生“剩余空间”供分配； - 单行 flex 容器下
align-content完全无效，此时该用align-items控制单行内项目的对齐。
单个容器内多个子元素垂直“撑开式”分布（非换行）
这是最常被误称为“垂直分散”的场景：比如一个高容器里放三个按钮，想让第一个在顶部、第二个居中、第三个在底部。这不是靠对齐属性，而是靠 margin 或定位释放空间：
- 给中间元素设
margin: auto（仅在 flex 容器中有效）：display: flex; flex-direction: column;，然后中间项加margin: auto 0;； - 用绝对定位组合
top/bottom：position: relative在父容器，子元素分别设top: 0、top: 50%; transform: translateY(-50%)、bottom: 0； - 避免用
line-height撑高容器再靠vertical-align——它只对 inline/inline-block 元素起作用，且多行文本会直接失效； - 如果子元素是表格单元格（
<td>），<code>vertical-align只控制单元格内内容，不能控制单元格自身在表格中的位置。table 布局中误用 vertical-align 的典型错误
很多人试图在
<tr> 或 <code><table> 上写 <code>vertical-align: middle，结果毫无反应——因为该属性只对<td>、<code><th> 或 <code>display: table-cell元素生效：立即学习“前端免费学习笔记（深入）”；
- 写在
<tr> 上：浏览器忽略，无报错也无效果； <li>给 <code><td> 里的 <code><div> 设 <code>vertical-align，但没改它的display（默认 block），该属性不触发； - 用 HTML4 的
valign="middle"属性：HTML5 已废弃，W3C 验证失败，JS 也无法读取； - 真正要让
<td> 内容垂直居中，必须同时写：<code>td { text-align: center; vertical-align: middle; }； - 若
<td> 高度由内容撑开（如单行文字），<code>vertical-align: middle看不出变化——需加padding或设min-height扩大参考空间。真正难的不是写哪条 CSS，而是判断当前结构属于哪种布局语义：是流式内容排版？是数据表格？还是需要精确控位的 UI 组件？选错模型（比如硬用 table 做导航栏垂直分散），后面所有对齐都会卡住。别急着堆属性，先看 DOM 层级和 display 类型。
- 写在
