用Flex实现搜索实时过滤需结合JS逻辑与CSS响应式布局：父容器设flex-wrap: wrap、子项用display: none隐藏、flex-basis+min-width控制尺寸、gap替代margin，并通过媒体查询和@supports处理兼容性问题。
如何用 Flex 实现搜索后实时过滤列表并保持响应式
Flex 本身不处理搜索逻辑，但它是让过滤后的列表“看起来不乱”的关键。搜索过滤是 JavaScript 的事，CSS 的任务是：过滤掉某些项时，剩余项能自动重排、等宽、换行合理，且在小屏下不溢出。display: flex 配合 flex-wrap: wrap 是基础，但容易忽略 flex-basis 和 min-width 的配合。
常见错误现象：filter 后列表项堆成一长条、移动端文字被截断、隐藏项仍占空白位置。
- 用
visibility: hidden隐藏项会保留布局空间，必须用display: none - 每项设
flex: 1 1 calc(33.333% - 12px)不够健壮，小屏下应退化为单列，推荐用flex-basis: 280px+min-width: 280px，再靠媒体查询调整 - 父容器加
gap: 12px比用margin更干净，且支持响应式缩放（如gap: clamp(8px, 2vw, 16px)）
为什么 flex-wrap: wrap 在搜索过滤后有时不生效
根本原因不是 Flex 有问题，而是被过滤项的 display 值或父容器约束干扰了换行判断。比如给列表项设了固定 width: 300px，但容器宽度小于 300px，又没设 flex-wrap，就会横向溢出。
使用场景：电商商品列表、文档标签页、后台用户卡片墙——这些都需要“删掉几个，剩下的立刻填满可用空间”。
立即学习“前端免费学习笔记（深入）”；
- 确认父容器有明确宽度（如
max-width: 1200px或width: 100%），否则flex-wrap可能因容器无限宽而不触发换行 - 避免对子项同时设置
width和flex，优先用flex-basis控制基准尺寸 - 如果用
justify-content: space-between，最后一行可能左右不对齐，此时改用justify-content: flex-start更可控
搜索框与列表联动时的 CSS 性能陷阱
每次输入都触发重排重绘，尤其列表项多时，display: none 切换比 opacity: 0 + pointer-events: none 更轻量，但别在动画中混用。
性能影响：Chrome DevTools 的 Rendering 面板里勾选“Paint flashing”，能看到频繁闪烁的区域——那就是重绘热点。
- 不要给列表项加
transition: all .3s，只过渡需要的属性，如transition: opacity .15s, transform .15s - 搜索过程中，把
input的oninput节流到 100ms 以上，避免 CSS 还没画完，JS 又塞进新状态 - 如果列表项含图片，记得加
height: auto和aspect-ratio: 1/1（支持现代浏览器），防止高度塌陷导致 Flex 换行错乱
移动端适配中最容易被忽略的 Flex 细节
不是所有设备都支持 gap，iOS Safari 14.5+ 才完全支持，老版本需回退；另外，flex-direction: column 在小屏下虽省事，但失去“自动换行”能力，得手动控制。
兼容性影响：iPhone SE（第一代）或 Android 8 的 WebView 里，gap 会被忽略，flex-wrap 可能不按预期折行。
- 用
@supports (gap: 12px)包裹gap样式，否则 fallback 到margin（注意负 margin 修正） - 小屏下别只靠
flex-basis，加媒体查询强制单列：@media (max-width: 480px) { .list { flex-direction: column; } .item { flex-basis: auto; } } -
min-width: 0加在子项上，防止文本过长撑破 Flex 容器（尤其搜索结果含长 URL 时）
真正麻烦的是搜索词为空时的视觉反馈——清空输入框后，列表恢复原状，但用户可能没意识到“所有项已回来”，这时候 CSS 得配合 JS 加个淡入或轻微位移，而不是干等。
