flex-wrap: wrap 是按钮组堆叠的关键开关，必须显式设置才能实现换行；配合 flex-direction: row 和合理 flex 值（如 flex: 0 1 140px）控制堆叠时机，避免 width 硬设导致溢出；优先用 gap 而非 margin 防止换行后间距错乱。
Flex-wrap 是按钮组堆叠的关键开关
不设 flex-wrap: wrap，按钮永远挤在一行，哪怕屏幕窄到只剩 200px。它不是“自动适配”，而是明确告诉 Flex 容器：“行不够就换行”。默认值是 nowrap，这就是为什么你调了 flex-direction: row 却看不到堆叠——根本没开换行权限。
- 必须显式写
flex-wrap: wrap，不能依赖父容器或继承 - 搭配
flex-direction: row（默认值）才生效；若设成column，wrap会按列堆叠，通常不是你想要的 - 移动端小屏下，单个按钮宽度建议用
flex: 1 1 auto或固定值（如min-width: 120px），避免换行后按钮被压得过窄
按钮宽度控制决定堆叠时机
堆叠不是靠屏幕尺寸“猜”的，而是靠子项实际占用空间超过容器宽度时触发。如果每个按钮都设了 width: 100%，那永远只有一列；如果全用 flex: 0 0 auto 又可能在宽屏下铺不满。
- 推荐组合：
flex: 1 1 min-content或flex: 0 1 140px（第二个值1允许压缩，第三个值设合理基准宽度） - 避免对按钮直接设
width: 200px，否则在窄屏下会溢出或强制横向滚动 - 用
min-width配合flex: 1更稳妥，例如：min-width: 130px; flex: 1;
移动端堆叠后间距错乱？检查 gap 和 padding 冲突
gap 在换行后依然生效，但若按钮自身有 margin 或父容器有 padding，容易叠加出过大的空白，尤其在 iOS Safari 中表现更明显。
- 优先用
gap控制按钮间距（如gap: 8px），不要混用margin - 若需兼容旧浏览器（IE 或早期安卓 WebView），改用
margin-right+margin-bottom，并给最后一行按钮加margin-right: 0（用:nth-child或 wrapper 包裹处理） - 父容器的
padding建议统一用padding-inline，避免换行后底部多出额外空隙
伪类交互状态在堆叠后失效？重置 focus-visible 和 hover 范围
堆叠后按钮垂直排列，但 :hover 和 :focus-visible 仍按原 DOM 顺序响应。如果按钮高度不一致，或用了 transform 微调位置，视觉焦点框可能偏移。
- 确保所有按钮有统一
height或min-height，避免 hover 时上下跳动 - 慎用
position: relative+top调整堆叠位置，这会让:focus-visible的 outline 框错位 - 若需高亮当前行，用
button:focus-within配合 wrapper 更可靠，而不是只依赖单个按钮的:focus
flex-wrap 没开、flex-basis 设太死、或者 gap 和 margin 在换行后叠加出意料之外的留白。这些地方一动就影响整排，调试时建议先关掉所有 margin/padding，只留 flex 和 gap，再逐步加回样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
