gap不参与子项宽度计算，仅作为布局层的轨道间隙物理分隔相邻项；Grid中需先减总gap再均分剩余空间，Flex中应使用flex-basis配合calc()显式控制宽度，并注意box-sizing、min-width等约束。
gap 本身不参与子项宽度计算，只是“挤出”固定间隙
很多人以为 gap 会像 margin 那样从子项可用宽度里“扣掉”，其实不是。gap 是布局层插入的**轨道间隙**，它不改变子项的 flex-basis 或 grid-template-columns 定义，只在渲染时把相邻轨道物理分开。所以“精准计算子项宽度”的关键，是先明确容器用的是 Flex 还是 Grid，再按各自规则算——gap 只负责最后一步留空。
Grid 场景下：用 repeat() + fr 配合 gap 算真实可用宽
比如三等宽按钮，容器宽 300px，gap: 8px：
- 3 列 → 2 个列间隙 → 总 gap 占用
2 × 8px = 16px - 剩余可分配宽度：
300px − 16px = 284px - 每列均分：
284px ÷ 3 ≈ 94.67px，对应写法是grid-template-columns: repeat(3, 1fr) - 若改用
repeat(3, minmax(0, 1fr))或给子项加min-width: 0，可防内容撑宽破坏等宽
注意：1fr 是“剩余空间均分”，不是“容器宽 ÷ 列数”。漏掉 gap 占用，算出来的宽度一定偏大。
Flex 场景下：别信 flex: 1，用 flex-basis 显式控制
flex: 1 在小屏下极易压缩变形，真正可控的是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 设父容器
display: flex; gap: 8px; flex-wrap: wrap; - 每个子项写
flex: 0 0 calc((100% - 2 * 8px) / 3)（3 列） - 或更稳妥：用
flex-basis: 33.333%; max-width: 33.333%，再靠gap补齐视觉间隔 - 必须加
min-width: 0，否则图片/文字长的项会霸占更多空间
浏览器对 calc() 中减 gap 的支持很稳（Chrome 85+、Firefox 63+、Safari 14.1+），但 IE 全系不认，得降级为 JS 动态设 style.flexBasis。
容易被忽略的三个硬约束
就算公式全对，以下任一条件不满足，算出来的宽度就不可靠：
- 父容器没设
width或max-width，尤其在inline-flex下，宽度由内容撑开，calc()失效 - 子项有
border或padding却没设box-sizing: border-box，导致实际占用超预期 - 用了
white-space: nowrap但内容过长，触发横向溢出，gap看似“消失”，其实是被压扁了
调试时直接看 DevTools 的 Layout 面板，比对着代码猜更准——gap 对应的是“Gutter”区域，而子项宽度显示在 “Computed” 的 width 值里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
