子项换行错位需设flex-shrink:0并用min-width替代固定width；grid跨层对齐应弃用grid-area，改用grid-column和统一grid-template-columns；移动端按钮须设min-height:44px和touch-action:manipulation。
多层嵌套分类菜单里，子项换行错位怎么办
本质是 flex 容器对齐逻辑和子项 min-width 冲突。常见现象：二级分类突然跳到下一行，或最后一列明显缩进；尤其在响应式宽度变化时更明显。
关键不是加 flex-wrap: wrap，而是控制子项的“不压缩底线”。flex-shrink: 0 必须显式设上，否则浏览器默认允许收缩，一旦父容器变窄，文字被挤、换行点就乱。
-
display: flex的直接子元素（即每组分类项）要加flex-shrink: 0 - 避免给子项设固定
width，改用min-width: 120px这类带弹性的约束 - 如果用了
justify-content: space-between，最后一行不满时会拉裂对齐——此时换用space-around或加伪元素占位更稳
CSS Grid 做三级分类筛选时，跨层对齐失效
Grid 的 grid-template-areas 在动态增删分类项时极易崩，尤其是中间层级（比如品牌列表）长度不固定，导致后续区域偏移。这不是写法错，是语义化区域定义天然不适合动态结构。
真正能对齐的，是基于行轨道的隐式定位：grid-auto-flow: row + 每个分类区块统一声明 grid-column: span 2（或按需 span），让 Grid 自动按行填满，而非靠命名区域硬卡。
立即学习“前端免费学习笔记（深入）”；
- 放弃
grid-area，改用grid-column-start/grid-column-end控制单个区块跨度 - 所有同级分类容器必须有相同
grid-template-columns基线（例如repeat(auto-fit, minmax(160px, 1fr))），否则跨层视觉错位 - 注意
gap是作用在网格线之间，不是容器内边距；若需内部留白，优先用padding，别依赖gap对齐内容
移动端小屏下，多层级筛选按钮点击热区太小
问题不在样式，而在 touch-action 和 min-height 的组合缺失。iOS Safari 默认把高度 的可点击元素热区压到 44px，但若父容器有 <code>overflow: hidden 或 transform，这个兜底就会失效，导致点不中。
最简解法是绕过系统干预：给所有筛选按钮加 min-height: 44px，同时补上 touch-action: manipulation 显式启用快速点击优化。
- 别只设
height: 44px，用min-height兼容文字撑高场景 - 若按钮含图标+文字，确保
line-height不小于min-height，否则垂直居中会漂移 - 禁用
user-select: none在按钮上——它会意外阻断 iOS 的 tap 识别
JavaScript 动态插入分类项后，CSS 样式没生效
不是 CSS 加载慢，是新节点没被正确纳入现有布局上下文。典型表现：JS 插入的 <div class="filter-item"> 看起来“扁平”，不继承父级 <code>flex 或 grid 的排列规则。
根本原因是：插入节点时，父容器的 display 类型（如 flex）对新增子节点有效，但若父容器本身是 JS 动态创建的，或曾被 innerHTML 重写过，其渲染上下文可能未重建。
- 避免用
innerHTML += ...，改用appendChild()或insertAdjacentElement('beforeend', el) - 如果必须用字符串插入，插入后手动触发一次
getComputedStyle(parent).display，强制浏览器重读布局状态 - 检查是否误加了
display: contents在父级——它会让子节点脱离布局流，新插入项自然“失联”
多层级筛选真正的复杂点不在写法，而在于“哪一层该由 CSS 控制，哪一层必须交由 JS 维护状态”。一旦开始用 JS 操控某层的显示/隐藏，就别指望纯 CSS 的 :has() 或兄弟选择器还能可靠联动——这地方最容易反复踩坑。
