flex嵌套比grid更稳当，因safari 15.6下grid的auto-fill+minmax()丢列、firefox重排卡顿、跨行对齐失控；flex流式适配高度差异，外层column控行堆叠、内层row控换行分布，需正确设gap、calc()宽度、box-sizing及min-height:0防坍缩。
为什么仪表盘用 Flex 嵌套比 Grid 更稳
当卡片高度不一、要动态增删、或需兼容 Safari 15.6 及更早版本时，Flex 嵌套实际更可靠。Grid 的 auto-fill + minmax() 在 Safari 15.6 下会丢列；Firefox 在 resize 后可能卡住不重排；卡片跨行后对齐逻辑也容易失控。Flex 的流式行为天然适配内容高度差异，不需要手动干预 grid-row 或反复调 align-items。
外层 column + 内层 row 的职责必须分清
最外层容器设 display: flex; flex-direction: column;，只负责“行与行之间垂直堆叠”，不参与每行内部排列。每一行（如 .dashboard-row）单独设 display: flex; flex-direction: row; flex-wrap: wrap;，让它自己处理本行内卡片的水平分布和换行。
常见错误包括：
- 把所有卡片塞进一个大
flex-direction: row容器——导致无法控制行间距，也无法让标题行独占全宽 - 在父级上设
align-items: center试图影响子行居中——无效，应直接在目标行加justify-content: center - 漏设
gap: 16px或等效 margin——间隙靠 margin 模拟易出错，gap更稳定（Chrome 89+、Safari 14.1+ 支持）
卡片宽度必须用 calc() + flex-basis，别信百分比
width: 33.333% 看似三列，但小数精度、边框、padding 和盒模型差异会让第四张卡被挤到下一行。正确写法是让卡片自己算宽度：
- 若用
margin: 0 8px，则卡片设flex: 0 0 calc(33.333% - 16px) - 若用
gap: 16px，同样用flex: 0 0 calc(33.333% - 16px)（gap 不计入子项尺寸，但占容器空间） - 必须配
box-sizing: border-box，否则 padding/border 会撑出容器 - 卡片高度一律不设
height，靠内容自然撑开；设固定高会导致高度不一时错位
嵌套多了 flex: 1 就容易失效，关键父容器要加 min-height: 0
典型表现：内容区域空白、滚动条消失、高度坍缩为 0。这不是代码写错，而是某层父容器没有可分配的高度。
排查步骤：
- 用开发者工具高亮每个 flex 容器，看哪一层的
computed height是auto却没被内容撑开 - 只要父容器是
display: flex且含flex-direction: column，它的子项若要用flex: 1占满剩余空间，该父容器就必须显式设min-height: 0 - 避免混用
height: 100%和flex: 1——flex 逻辑会覆盖 height，造成不可预期行为
真正难的不是写几行 CSS，而是每一层 flex 容器是否都明确了自己的高度来源。一旦漏掉一个 min-height: 0，整块布局就可能无声崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
