移动端多列筛选菜单不能只靠 flex-direction: row 横向铺开，必须用 flex-wrap: wrap + 显式控制子项宽度，否则在小屏上会溢出、换行错乱或文字被压缩；flex: 1 不适用，因筛选项有语义宽度差异，应改用 flex: 0 0 auto + min-width；多行对齐需 align-content: center 而非 justify-content；移动端禁用 :hover，须用 checkbox + label + js 切换 active 状态；列数响应式推荐 grid 控制，flex 辅助对齐。
直接说结论：移动端多列筛选菜单不能只靠 flex-direction: row 横向铺开，必须用 flex-wrap: wrap + 显式控制子项宽度，否则在小屏上会溢出、换行错乱或文字被压缩。
为什么 flex: 1 在移动端筛选菜单里基本不能用
筛选项（如标签、按钮、复选框）通常有固定语义宽度（比如“iOS”“Android”“Web”），不是均分容器的抽象列。用 flex: 1 会导致：
- 短文本项（如“全部”）被拉宽，长文本项（如“实时音视频通话 SDK”）被强制截断或换行
- 点击热区变大，破坏操作精度
- 配合
gap时，实际可用宽度计算混乱，尤其在 iOS Safari 中 gap 可能被忽略
正确做法是放弃均分逻辑，改用 flex: 0 0 auto 或带 min-width 的组合：
.filter-item {
flex: 0 0 auto;
min-width: 64px; /* 保证图标+文字最小可点区域 */
padding: 6px 12px;
box-sizing: border-box;
}
多列换行后对齐不齐？关键在 align-content 和 gap
当筛选项数量多、触发换行时，常见现象是：第一行满 4 个，第二行只有 2 个，但第二行左对齐，看起来像少了一半——这不是 bug，是 justify-content: flex-start（默认值）的正常行为。
要实现“每行都居中”，不能靠 justify-content: center（它会让整行居中，不是每个 item 居中），而要：
- 给容器加
align-content: center（仅对多行生效） - 确保所有
.filter-item宽度一致，或至少用min-width对齐基线 - 慎用
gap：安卓 WebView 4.4–6.0 不支持gap，降级方案是用margin-right+:last-child清除
示例：
.filter-list {
display: flex;
flex-wrap: wrap;
align-content: center;
gap: 8px;
}
.filter-item {
flex: 0 0 auto;
min-width: 72px;
text-align: center;
}
点击态和 hover 在移动端失效？别依赖 :hover
移动端没有 hover 状态，伪类 :hover 在 iOS 和多数安卓浏览器中只在点击瞬间触发，且无法维持。把筛选状态切换写在 :hover 里，等于没写。
真实可行的交互链路是：
- 用
input[type="checkbox"]+label包裹实现可访问的点击目标 - 用 JavaScript 监听
change事件，切换.filter-item.active类 - CSS 中定义
.filter-item.active样式，而非.filter-item:hover - 为触控设备加
touch-action: manipulation减少 300ms 延迟
同时注意：iOS Safari 对 label 内嵌 div 的点击支持不稳定，务必用 span 或 button 作为最内层可点元素。
响应式列数切换时，不要只改 flex-direction
很多教程教你在媒体查询里写 @media (max-width: 480px) { .filter-list { flex-direction: column; } }，这会导致所有筛选项堆成一列，失去“多列筛选”的本意。
真正需要的是动态列数控制，推荐两种方式：
- 用
flex-basis配合min-width：设.filter-item { flex: 0 0 calc(50% - 8px); }→ 小屏下自动两列；再加一层媒体查询max-width: 360px改为calc(100% - 8px)→ 单列 - 更健壮的做法：用
display: grid外层控列数，flex内层控对齐，比如.filter-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }—— Flex 在这里退为辅助布局工具，Grid 承担列数逻辑
最后提醒一句：iOS Safari 对 flex-wrap: wrap 下 align-content 的渲染有延迟，首次展开菜单时可能闪一下。解决方案不是加 transition，而是初始化时就让容器有高度（哪怕 height: 1px），骗过渲染引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
