数据看板需显式设容器高度或min-height，因flex容器不自动占满父高；推荐min-height:100vh或calc(100vh-60px)；卡片布局优先用row/col实现响应式分栏，多行对齐用align-content-center而非align-items-center。
直接用 d-flex + flex-column + justify-content-between 搭配响应式断点类，就能在 3 行代码内撑起一个自适应高度的数据看板骨架；但多数人卡在容器高度没设、子项未限制 flex-basis 或忘了 flex-wrap: wrap 导致卡片错位。
为什么数据看板必须显式设置容器高度或 min-height
Flex 容器默认不占满父容器高度，d-flex 只改 display，不自动继承高度。看板通常需填满视口或侧边栏剩余空间，若父级没设高，align-items-center 或 justify-content-center 会失效。
- 给看板最外层加
style="min-height: 100vh;"或class="h-100"（需确保父级也有高度） - 用
vh单位比%更可靠，避免因祖先元素未设高导致塌陷 - 若嵌入后台模板（如带固定 header / sidebar），推荐用
calc(100vh - 60px)扣除固定区域高度
卡片网格该用 row/col 还是纯 d-flex
取决于是否需要栅格断点自动换行与列宽比例控制。纯 d-flex 灵活但换行逻辑弱；row/col 天然支持 col-md-4 这类语义化分栏，更适合数据卡片这类等宽/等高模块。
- 要响应式三栏 → 用
<div class="row"><div class="col-md-4">…</div></div>，无需额外写flex-wrap - 要首行 2 卡、次行 3 卡且宽度不均 → 改用
d-flex flex-wrap+flex-grow-1/flex-basis-0手动分配 -
row默认带负 margin 和 gutter，若需无间距卡片，加g-0类，别只删px-*
justify-content 和 align-content 在多行看板中的误用
看板常含多行卡片，此时 align-items-center 只对单行生效；若想让所有行整体垂直居中，必须用 align-content-center，且前提是容器已启用换行（flex-wrap: wrap）。
- 错误写法：
class="d-flex flex-column align-items-center"→ 列方向下，align-items控制的是“每张卡片的水平对齐”，不是行间位置 - 正确组合：
class="d-flex flex-wrap align-content-center"（主轴为 row）或class="d-flex flex-column flex-wrap align-content-center"（主轴为 column，此时控制的是“每列之间的垂直间距”） -
justify-content-between在卡片高度不一时会导致底部参差，此时应改用gap-3+align-items-stretch统一拉伸
如何让某张指标卡片自动撑满剩余空间
看板顶部常有标题区、中间是图表、底部是状态卡片——这时不能靠 flex-grow-1 直接加给最后一项，因为 Flex 默认主轴是 row，而你需要的是 column 方向的纵向伸缩。
- 外层容器必须是
flex-column，否则flex-grow不作用于高度 - 给目标卡片加
class="flex-grow-1"，同时确保其兄弟元素有明确高度（如h-50px）或flex-shrink-0 - 若卡片内含 Chart.js 图表，记得初始化时传
responsive: true, maintainAspectRatio: false，否则flex-grow拉伸无效 - 避免对
flex-grow-1元素再设height，CSS 会优先按 height 计算，忽略 flex 规则
真正难的不是写对类名，而是判断哪一层该设 flex-wrap、哪一层该交由 row/col 处理、以及什么时候该放弃 Flex 改用 CSS Grid —— 尤其当看板需支持拖拽重排或动态增减模块时，d-flex 的顺序依赖和不可见 DOM 结构会让 JS 交互变得脆弱。
