用flex布局可实现h5文件上传缩略图的自适应网格：容器设flex-wrap:wrap和gap，子项用flex:1 1 120px、min/max-width及aspect-ratio控制伸缩与比例，图片用width/height 100%+object-fit确保清晰不溢出。
用 Flex 布局实现 H5 文件上传缩略图的自适应网格，关键在于让每张缩略图在容器内“智能伸缩、自动换行、不溢出、保持比例”，同时兼容手机竖屏、横屏和 PC 窗口缩放。不需要 JS 计算列数，纯 CSS 即可完成。
容器设置：启用弹性流与可控间距
给缩略图外层容器（如 <div class="thumb-grid">）设置：
<ul>
<li>
<strong>display: flex</strong> + <strong>flex-wrap: wrap</strong>：允许子项水平排列、空间不足时自动换行</li>
<li>
<strong>gap: 8px</strong>：统一间隙，比用 margin 更稳定（避免外边距合并或塌陷）</li>
<li>
<strong>width: 100%</strong> + <strong>box-sizing: border-box</strong>：确保容器占满父级，内边距/边框不撑破宽度</li>
<li>可选：<strong>padding: 4px</strong> 防止首尾缩略图贴边</li>
</ul>
<h3>缩略图项：弹性生长 + 尺寸约束</h3>
<p>每个缩略图建议包裹一层 <code><div class="thumb-item">，再放 <code><img>。样式如下：
-
flex: 1 1 120px：等价于
flex-grow: 1; flex-shrink: 1; flex-basis: 120px，表示基础宽度 120px，有空余就拉伸，空间紧张就收缩 - min-width: 100px：防止小屏下缩得太小（决定最多几列，例如 375px 宽屏最多 3 列）
- max-width: 200px：避免大屏下单图过大失真（可按需调整）
- aspect-ratio: 1/1（推荐）：强制正方形缩略图，适配头像、证件照等常见场景
图片本身：保持清晰与比例
缩略图 <img> 标签只需轻量控制：
- width: 100% + height: 100%：填满父容器（即 .thumb-item）
-
object-fit: cover：裁剪居中显示，适合封面类缩略图；若需完整显示，改用
contain - vertical-align: top：消除行内元素默认基线对齐导致的底部空白
- 避免写
height或width固定像素值，否则破坏弹性
响应增强：配合媒体查询微调
Flex 本身已响应，但可加断点优化体验：
- 小屏（≤480px）：
flex-basis: 80px，提升单行数量 - 平板（481–768px）：
flex-basis: 140px，兼顾清晰度与密度 - PC（≥769px）：
max-width: 240px，释放更大展示空间
