大屏幕看板用 Flex 实现多列等宽应优先使用 flex: 1 而非 width: 33.33%，因其能自动均分剩余空间、规避小数像素四舍五入导致的错行与滚动条，且天然支持等高、响应式缩放与内容自适应。
大屏幕看板用 Flex 实现多列等宽，关键不是写 width: 33.33%，而是让浏览器自动均分——否则缩放、分辨率变化时列宽会错位、文字换行异常，甚至出现滚动条。
为什么 flex: 1 比百分比更稳
百分比宽度依赖父容器精确计算，而大屏设备（如 3840×2160）下，小数像素四舍五入会导致最后一列被挤到下一行；flex: 1 让浏览器按剩余空间整除分配，天然规避该问题。
-
flex: 1等价于flex: 1 1 0，从零基线开始均分，无视子项原始宽度（比如带 padding 的卡片） - 若某列内容特别长（如长文本或 URL），需额外加
word-break: break-word，否则会撑破列宽 - 不要给列元素设
width或min-width，否则和flex: 1冲突，导致部分列固定、其余列压缩
三列等宽的最小可行代码
只需两处声明：容器启 flex，子项设 flex: 1。不需要 justify-content 或 flex-wrap —— 大屏默认单行足够容纳。
.dashboard-grid {
display: flex;
}
.dashboard-column {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
-
.dashboard-column必须是.dashboard-grid的直接子元素；中间套一层<div>就失效 - 所有列会自动等高（默认
align-items: stretch），适合看板中指标卡高度不一的场景 - 如果某列想略宽（比如主监控区占 50%，另两列各 25%），改用
flex: 2/flex: 1/flex: 1，比例关系由flex-grow值决定
大屏下容易被忽略的兼容性坑
某些旧版 Electron 或定制 Chromium 内核（如部分工业看板终端）对 flex: 1 解析不一致，表现为列宽忽大忽小或换行。
立即学习“前端免费学习笔记（深入）”；
- 安全兜底写法：
flex: 1 1 0显式写出三个值，避免浏览器按自身默认补全 - 禁用
flex-shrink可能引发横向溢出：大屏上字体放大后内容变宽，若列设了flex: 1 0 0，就无法收缩，触发水平滚动条 - 检查是否全局重置了
td或th的white-space: nowrap—— 看板若混用表格展示数据，该规则会让 flex 列内文本不换行
真正麻烦的不是写几行 CSS，而是当看板接入实时数据后，某列突然高度暴涨、文字撑开、边框错位——这时候得回头确认 box-sizing: border-box 是否漏写了，以及 padding 是否在 flex: 1 作用域内被正确包含。
