弹性换行本身不产生垂直间隙，所谓“底部空隙”实为line-height、font-size、vertical-align基线对齐及HTML空白字符等副作用所致，需通过align-items: flex-start、align-content: flex-start、vertical-align: top及清除空白节点等综合处理。
弹性换行（flex-wrap: wrap）本身不会产生“垂直间隙”，你看到的空隙几乎全是 line-height、font-size 或 vertical-align 的副作用，不是 flex 布局的问题。
为什么 flex-wrap 容器里子元素换行后底部有空隙
这不是换行导致的“新间隙”，而是子元素作为 inline 或 inline-block 类型时固有的基线对齐行为被带入了 flex 上下文——尤其当容器内混有文本、img、button 或未显式设 align-items 的 flex 项时。
- 如果子元素含文字或图片，默认
vertical-align: baseline，而基线以下预留空间（为 descender 字符如 g、y 留位置），这个空间在换行后会累积成视觉上的“底部空隙” -
flex-wrap: wrap容器若未设align-content: flex-start，多行时行与行之间默认按stretch分布，可能放大上下留白感 - 父容器或子元素设置了
line-height > 1，且子元素是display: inline（比如没写display: block的span），该行高会撑开整行高度
检查并重置 align-items 和 align-content
flex 容器的垂直对齐控制权在两个属性手上：align-items 控制单行内子项交叉轴对齐，align-content 控制多行之间的分布。两者都默认不是 flex-start，容易引入意外留白。
- 加
align-items: flex-start：让所有子项顶部对齐，消除基线对齐带来的底部空白 - 加
align-content: flex-start：避免多行时行与行被拉伸分散，强制从顶部开始紧密排列 - 若子元素是图片或按钮，再补一句
vertical-align: top（对img、input等仍起作用）
line-height 和 font-size 是隐藏推手
哪怕用了 display: flex，只要容器或其祖先设置了 font-size 和 line-height，且内部有文本节点或未重置的行内元素，这些值仍会参与行盒（line box）计算，进而影响换行后的行高表现。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给 flex 容器设
font-size: 0可快速验证是否为空白字符或行高所致（注意：只用于诊断，别长期保留） - 更稳妥做法：确保所有子元素显式设
font-size和line-height，或统一设line-height: 1避免继承放大 - 特别注意
img标签：它默认是inline，即使在 flex 容器中，也会受line-height影响；加display: block或vertical-align: top即可切断关联
别忽略 HTML 源码里的换行和空格
当 flex 子项中混有文本节点（比如 text node，它占据高度、响应 line-height，并在换行时成为“看不见的占位符”。
- 删掉 flex 容器内子元素标签间的换行和空格（
- 或用 HTML 注释隔开：
- 若子元素是纯容器（无文本），加
font-size: 0到容器，再给子元素单独恢复字号，能一并吃掉文本节点高度
真正麻烦的不是换行，而是你没意识到那些看似无关的 line-height、font-size 和未闭合的文本节点，正在 flex 的每一行底下悄悄垫高。动手前先打开开发者工具，把鼠标悬停在空隙上，看它到底属于谁的盒模型——90% 的情况，问题不在 flex-wrap，而在你忘了关掉某个默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
