用Flex实现左图右文排行榜列表项：容器设display: flex，头像加flex-shrink: 0防压缩，文字区用flex: 1自适应；名次角标用position: absolute脱离文档流，文字子元素统一设vertical-align: middle解决iOS对齐偏差。
用 Flex 实现左图右文的排行榜列表项
移动端排行榜最常见的是“头像 + 名次 + 昵称 + 分数”左图右文结构，display: flex 是最稳妥的选择——兼容性好（iOS 8+/Android 4.4+ 都支持），行为可预测，且天然支持垂直居中。
关键点在于：容器设 display: flex，头像用 flex-shrink: 0 防止被压缩，文字区域用 flex: 1 自适应剩余空间；名次标签建议用 position: absolute 叠在头像右上角，避免影响主流布局流。
常见错误是给文字区域加固定宽度或 white-space: nowrap，导致长昵称溢出或换行错乱。正确做法是让昵称和分数各自用 overflow: hidden; text-overflow: ellipsis; white-space: nowrap 单独截断。
处理 iOS Safari 下 flex 行高不一致问题
iOS Safari 对 flex 容器内行内元素（比如 span）的基线对齐有偏差，常表现为头像和文字底部不对齐，尤其在使用 line-height 控制高度时更明显。
解决方法很简单：
- 给所有文字子元素（昵称、分数、名次）显式设置
vertical-align: middle - 头像
img标签加vertical-align: middle或display: block - 避免只依赖
line-height居中，改用padding+flex的align-items: center
别碰 align-items: baseline——这是 iOS 错位的根源之一。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
名次角标用 position: absolute 还是 flex 嵌套？
角标（如“第1名”的红底白字小圆标）必须脱离文档流，否则会干扰头像尺寸计算和 flex 主轴分布。用 position: absolute 是唯一推荐方案。
操作要点：
- 父容器（头像外层
div）加position: relative - 角标元素设
position: absolute; top: -4px; right: -4px;（数值按设计稿微调） - 角标宽高用
em或rem，比如width: 1.2em; height: 1.2em;，保证缩放一致性 - 禁用
transform: scale()做缩放——iOS 微信 WebView 下可能模糊
列表滚动卡顿？检查 will-change 和图片加载
排行榜通常几十条，滚动卡顿多来自两处：未优化的图片渲染、频繁重排。
实操建议：
- 头像统一用
img标签，src换成data-src，配合懒加载（如loading="lazy"或 IntersectionObserver） - 给列表项容器加
will-change: transform（仅当检测到是高端机型时启用，低端机反而更卡） - 禁用
box-shadow和border-radius组合（尤其是带透明度的阴影），iOS 上合成层开销大 - 分数数字用
font-variant-numeric: tabular-nums保证等宽对齐，避免数字宽度变化引发重绘
真正卡的时候，先看 Chrome DevTools 的 Rendering 面板是否频繁触发 Layout —— 如果是，大概率是角标没脱离文档流，或者用了 width: fit-content 这类动态计算属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
