用 flex 布局实现矩形统计图最轻量且响应友好：容器设 display: flex + align-items: center，条形统一 height: 24px、flex: 0 0 [比例]%，配合 min-width: 0 安全收缩；颜色用 css 变量，宽度优先由 js 注入 flexbasis，纯 css 场景慎用 calc()；ie11 不支持 gap，需用 margin-right + :last-child 兼容；文字标签与条形同级 flex 布局对齐，禁用 vertical-align 和 line-height。
用 flex 布局画矩形统计图，别碰 Float 和 position: absolute
矩形统计图（比如横向柱状图）本质是「等高、宽度按数据比例缩放的色块排列」，flex 是最轻量且响应友好的选择。用 float 会破坏文档流，导致父容器高度塌陷；用 absolute 则失去弹性，数据一变就得重算 left/top。
- 给容器设
display: flex+align-items: center，保证所有条形垂直居中 - 每个条形单独设
height: 24px（统一高度），flex: 0 0 %控制宽度 - 避免写死
width，否则小屏下溢出或换行——flex-basis配合min-width: 0才能安全收缩 - 颜色用 CSS 变量（如
--bar-color: #4a90e2），方便后续主题切换
calc() 算宽度时，注意单位混用会直接失效
常见错误是写成 width: calc(100% - 20px) 却忘了父容器有 padding，或者在 flex-basis 里混用 rem 和 %，浏览器直接忽略该声明。
- 宽度计算只在「已知最大值」场景下才用
calc()：比如总宽固定为 300px，当前数据占 65%，就写flex-basis: calc(300px * 0.65) - 更稳妥的做法是让 JS 计算好比例后注入
style属性：element.style.flexBasis = `${ratio * 100}%` - 如果必须纯 CSS，用
grid-template-columns配合repeat()+minmax()更可控，但灵活性下降
IE11 下 flex 的 gap 不生效，得手动加 margin
现代写法用 gap: 8px 分隔条形很清爽，但 IE11 完全不识别，所有条形会挤在一起，连边框都看不清。
- 兼容方案：给每个条形加
margin-right: 8px，再给最后一个用:last-child { margin-right: 0 } - 别用
:nth-last-child(1)，IE11 对伪类支持不稳定 - 如果条形数量动态，JS 渲染时直接跳过最后一个元素的
margin更可靠 - 顺带一提：
flex-wrap: wrap在 IE11 里行为异常，横向图一律禁用
文字标签和数值对齐，line-height 和 vertical-align 别乱套
条形右侧常跟数值标签（如「32%」），很多人用 vertical-align: middle 配合 inline-block，结果在不同字体下上下浮动，尤其遇到中文+数字混合时。
立即学习“前端免费学习笔记（深入）”；
- 统一把标签也放进
flex容器，和条形同级，用align-items: center对齐 - 避免设
line-height，它依赖字体度量，而height+padding更稳定 - 数值标签用
white-space: nowrap防止断行，再加overflow: hidden+text-overflow: ellipsis应对超长 - 如果标签需要右对齐（比如放在条形左边），改用
justify-content: space-between，别靠text-align
事情说清了就结束。真正麻烦的不是画出矩形，而是当数据从 12 个变成 200 个时，dom 节点数、重排开销、键盘焦点顺序、屏幕阅读器读取逻辑全得重新过一遍。