flex-wrap: wrap 是大屏卡片栅格核心开关，需显式开启；子项推荐 flex: 0 0 minmax(320px, 12vw)，配合 gap 实现响应式折行；避免嵌套多层 Flex，慎用 flex: 1 和 align-content。
Flexbox 实现大屏卡片栅格时，flex-wrap 是核心开关
不设 flex-wrap: wrap，所有卡片强行挤在一行，宽度被压缩或溢出——这是大屏上最常见的“卡死”现象。Flex 容器默认是 flex-wrap: nowrap，必须显式开启换行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 容器设
display: flex+flex-wrap: wrap，子项用flex: 0 0 auto或带具体宽度的flex值（如flex: 0 0 calc(25% - 16px)） - 避免对子项设
width: 25%同时又没留间隙余量，会导致第 5 个卡片掉到下一行——因为 4 × 25% = 100%，但gap或margin会额外占空间 - 优先用
gap（而非margin）控制间距，它不参与子项尺寸计算，且支持响应式：gap: clamp(8px, 1.5vw, 24px)
响应式断点下，用 min-width 控制每行卡片数比媒体查询更稳
直接写 @media (max-width: 1920px) { .card { flex: 0 0 25%; } } 容易和父容器的 justify-content 冲突，且维护成本高。更可靠的方式是让每个卡片自己“表态”最小宽度，由 Flex 自动折行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子项设
flex: 0 0 320px（单卡最小宽度），配合容器gap，就能自然实现：1920px 宽度下每行 5 张，1440px 下每行 4 张，1024px 下每行 3 张 - 避免同时设
min-width和固定flex-basis（如flex: 0 0 25%），两者逻辑冲突，浏览器行为不一致 - 大屏常需适配 3840×2160 等超宽分辨率，建议用
min-width: max(320px, 12vw)防止在巨屏上卡片过小
align-items 和 align-content 混用容易导致卡片高度错位
当卡片内容高度不一致（比如有的有标题+图表+指标，有的只有图标），align-items: stretch（默认值）会让所有卡片拉满容器高度，看起来像“被撑开”；而如果容器设了 align-content: flex-start 却忘了子项高度策略，第二行卡片可能顶部悬空。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一卡片高度用
align-items: stretch+ 子项内display: flex; flex-direction: column; height: 100%，再对内容区设flex: 1自适应 - 若允许高度不一致，改用
align-items: flex-start，并确保子项有height: fit-content或明确min-height -
align-content只在多行时生效，单行栅格下它完全无效——别白加
性能敏感场景下，避免在 flex 子项里嵌套多层 Flex 或 Grid
数据大屏常跑在低配 Windows 一体机或国产信创终端上，Chrome 110+ 虽已优化 Flex 布局性能，但若每个 .card 内部又套了 3 层 display: flex，加上动画、实时刷新，帧率容易跌破 30fps。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片内部布局优先用
grid替代嵌套 Flex（如用display: grid; grid-template-areas排布标题/图表/指标），单次计算更高效 - 禁用
flex: 1在深层子元素上，尤其在动态增删数据的卡片中——它会触发频繁重排 - 用
contain: layout style paint给卡片容器加隔离，防止局部更新影响全局布局计算
实际部署时最容易被忽略的是 gap 的浏览器兼容性：IE 完全不支持，旧版 Safari（row-gap/column-gap。如果项目还需兼容这些环境，得 fallback 到 margin + :nth-child 清除逻辑——但这部分往往测试覆盖不到，上线后才发现首尾卡片贴边。
