仪表盘用flex嵌套比grid更稳，尤其适配高度不一、动态增删及safari 15.6以下；外层column、内层row分责布局，卡片用calc()设flex-basis并box-sizing:border-box，避免flex:1嵌套失效，关键父容器加min-height:0，子项溢出时设min-width/min-height:0防截断。
仪表盘用 Flex 嵌套比 Grid 更稳，尤其当卡片高度不一、要动态增删、或需兼容 Safari 15.6 及更早版本时——Grid 的 auto-fill + minmax() 在 Safari 里会丢列，grid-row 手动干预又难维护。
外层 column + 内层 row：分清主容器和行容器的职责
整个仪表盘最外层必须是 flex-direction: column，它只管“行与行之间垂直堆叠”，不碰每行内部怎么排。每一行（比如 .dashboard-row）自己再设 display: flex; flex-direction: row; flex-wrap: wrap;，让它负责本行内卡片的水平排列和换行。
- 别把所有东西塞进一个大
flex-direction: row容器里——那样无法控制行间距，也无法让某行独占全宽（如标题行） -
.dashboard-row必须显式设gap: 16px（现代写法）或靠margin模拟间隙；gap在 Flex 中比margin更可靠，但需确认目标浏览器支持（Safari 14.1+、Chrome 89+） - 如果某行要居中对齐（如仅含一个大图表），直接在该行上加
justify-content: center，不要试图靠父级align-items传递
卡片宽度用 calc() + flex-basis，别信百分比
写 width: 33.333% 看似三列，但边框、padding、小数精度误差会让第四张卡被挤到下一行。正确做法是让卡片自己算宽度：
- 给卡片设
flex: 0 0 calc(33.333% - 16px)，其中16px是左右 margin 总和（比如margin: 0 8px） - 必须配
box-sizing: border-box，否则padding和border会撑出容器 - 如果用
gap: 16px替代 margin，就改用flex: 0 0 calc(33.333% - 16px)——gap不计入子项尺寸，但会占据容器空间 - 高度一律不设
height，靠内容自然撑开；设了固定高，卡片高度不一时就会错位
嵌套层级多了，flex: 1 就容易失效
flex: 1 在两层以上嵌套中极易失控，典型表现是内容区域空白、滚动条消失、或高度坍缩为 0。这不是代码写错了，而是某一层父容器没高度可分。
- 逐层检查 computed height：用开发者工具高亮每个 flex 容器，看哪一层的
height是auto却没被内容撑开 - 关键断点加
min-height: 0：只要父容器是display: flex且含flex-direction: column，它的子项若想用flex: 1占满剩余空间，该父容器就必须有min-height: 0 - 避免混用
height: 100%和flex: 1：同一元素上两者共存，flex逻辑会覆盖 height，但调试时容易误判成 height 没生效 - Safari 对
flex-basis解析更严格，统一写flex: 1 1 0比flex: 1更可控
子菜单、弹窗、滚动区这些“内部模块”要防 overflow 截断
在 flex 容器里放一个 overflow: auto 的子区域，结果滚不动？常见于侧边栏菜单、卡片内数据表格、或弹出筛选面板。
- 只要父容器是
display: flex，且子项含overflow: hidden或auto，就给该子项加min-width: 0（横向布局）或min-height: 0（纵向布局） - 别依赖
width: 100%让子项撑开——在嵌套 flex 中它常被忽略；改用flex: 0 1 auto - 如果子菜单是
position: absolute，确保其父项（如.menu-item）设了position: relative，否则定位上下文丢失 - 移动端展开菜单后高度异常？临时解法是给子菜单加
height: fit-content; overflow: hidden，比硬写flex: 1更稳
真正难的不是写几行 display: flex，而是每层容器都得独立声明方向、对齐、尺寸约束；浏览器不会帮你“继承”这些行为，漏掉任意一层的 flex-direction 或 min-height: 0，都会在真机 Safari 或 iOS WebView 上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
