flex-wrap 是 flexbox 中控制子元素是否换行的必需属性，当按钮数量不确定、屏幕宽度变化频繁或文字长度不一时，必须显式设为 wrap，否则默认 nowrap 会导致子元素强行单行溢出。
flex-wrap 是什么，什么时候必须用它
当过滤按钮数量不确定、屏幕宽度变化频繁，或者按钮文字长度不一时，flex-wrap 就不是可选项，而是必需项。默认 display: flex 会强行把所有子元素挤在一行，超出容器就溢出或隐藏，用户根本点不到右边的按钮。
关键判断：只要按钮组可能“换行”，就必须显式设置 flex-wrap: wrap，不能依赖默认值 nowrap。
怎么写才让按钮真正按需折行，而不是堆成一团
只设 flex-wrap: wrap 不够，常见错误是父容器没设宽度约束，或子项没设最小宽度，导致按钮被压缩到极窄甚至文字换行错乱。
- 父容器必须有明确宽度限制（比如
max-width: 100%或具体像素值），否则 flex 容器可能无限宽，不触发折行 - 每个按钮建议加
flex-shrink: 0，防止小屏下被压缩变形 - 给按钮设
min-width（如min-width: 80px）或用flex-basis控制基础尺寸，避免文字过长时单个按钮撑爆整行 - 如果按钮含图标+文字，用
white-space: nowrap防止文字内部断行
为什么按钮间距在折行后变得奇怪
折行后上下两行按钮之间出现过大空隙，通常是用了 margin 但没考虑 wrap 后的排列逻辑——比如给每个按钮加 margin-right，最后一项也会多出空白，折行后这个空白就变成行首空隙。
更稳妥的做法：
- 用
gap替代margin（支持现代浏览器，gap: 8px会自动处理行内和行间间距） - 若需兼容旧浏览器，改用
margin+ 选择器排除末尾项，例如：.filter-btn:not(:last-child)加margin-right - 避免对
:first-child或:last-child做垂直方向 margin 调整，flex 折行后它们的位置不固定
响应式场景下 flex-wrap 容易漏掉的细节
很多人只在桌面端测试，结果小屏下按钮堆叠成一列却挤满整个屏幕高度，或者折行后按钮高度不一致导致错位。
实际要注意：
-
align-items默认是stretch，会让所有按钮拉高到同一高度——如果某些按钮文字多、换行了，就会撑高整行；改成align-items: flex-start更可控 - 移动端建议配合
flex-direction: column+flex-wrap: wrap的组合（少见但有用），比如超多标签时改为纵向滚动布局 - 别忘了测试按钮聚焦态（
:focus-visible）在折行后的 outline 是否被截断，必要时加overflow: visible到父容器
flex-wrap 看似简单，但按钮组的真实场景里，宽度计算、文字渲染、焦点管理、响应式断点这四块最容易串在一起出问题，调的时候得一块一块隔离验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
