最直接方式是用 flex: 1 实现等高填充，需父容器设明确高度；固定数量时 grid-template-rows: repeat(n, 1fr) 更可靠；注意避免无高度塌陷、误用 justify-content 或 vertical-align 等常见错误。
用 display: flex + flex-direction: column 布局一列内容
想让一列元素（比如几个 <div> 或 <li>）在容器内垂直平均分布，最直接的方式是让容器成为 Flex 容器，并沿列方向排列，再用 justify-content: space-between 或 space-around 分配空白。但注意：这些值只控制主轴（这里是垂直方向）的**元素间/元素与边缘的间距**，不是“每行高度均等”——HTML 里没有“行”的概念，除非你主动换行或限制高度。
如果目标是「固定高度容器内，n 个子项等高填充」
这是更常见的实际需求：比如一个高 400px 的卡片，里面 4 个区块，希望每个占 100px 高度，且无缝衔接。这时不能靠 margin 或 text-align，得靠 Flex 的 flex: 1：
-
flex: 1让所有子项平分剩余空间（前提是容器有明确高度） - 必须给父容器设
height（或min-height），否则flex: 1无参照 - 子项默认不换行、不压缩，
flex: 1会强制它们拉伸填满
.container {
display: flex;
flex-direction: column;
height: 400px;
}
.item {
flex: 1;
}
grid-template-rows: repeat(n, 1fr) 更适合严格等分
当子项数量固定（比如总是 3 个），CSS Grid 比 Flex 更直观可控。它不依赖容器高度是否已知（只要容器有尺寸即可），也不受子项内容撑开影响：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
repeat(3, 1fr)表示创建 3 行，每行占 1 份自由空间 - 即使某个
.item里有大段文字，默认也不会溢出，而是整行被拉高 - 比 Flex 更少意外：不会因子项
margin或border导致总高度超限
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
height: 300px;
}
别踩这些坑
实际写的时候容易卡住的地方，往往和预期“平均分布”不符：
立即学习“前端免费学习笔记（深入）”；
- 忘了给父容器设
height或min-height—— Flex 的flex: 1和 Grid 的1fr都需要参考基准，空内容+无高度 = 高度塌缩为 0 - 子项用了
vertical-align或line-height干预行内布局 —— 这些对 Flex/Grid 子项无效，纯属干扰 - 用
justify-content: space-evenly试图“等分”，但它只分配空白，不控制子项自身高度；若子项高度不一致，视觉上根本不是“平均分布” - 在
table或inline-block场景下硬套 Flex —— 先确认结构是否真需要语义化表格，否则改用现代布局反而增加复杂度
真正难的不是写哪行代码，而是先想清楚：你要的“平均分布”，到底是按数量等分空间，还是按内容自适应高度，又或者要兼容老浏览器——这三者对应的解法完全不同。
