必须加flex-wrap: wrap，否则不换行；该属性须写在父容器上，配合display: flex生效，子项需设合理flex-basis和min-width: 0，并用gap替代justify-content实现多行均匀分布。
必须加 flex-wrap: wrap，否则无论怎么调 justify-content 都不会换行——这是最常被忽略的硬性前提。
为什么按钮不换行？flex-wrap: wrap 漏了或写错位置
Flex 默认是 nowrap，浏览器宁可让按钮溢出容器，也不会主动折行。这个属性必须写在父容器上，不能写在按钮（子项）上。
- 检查父容器是否真的设置了
display: flex和flex-wrap: wrap - 父容器没设
width或max-width，导致“永远够宽”，换行条件永不触发 - 子项用了
flex: 1或flex-shrink: 0，内容宁可撑爆也不缩小，换行逻辑被锁死 - 按钮内有长单词、URL 或未设
word-break: break-word，单行宽度被撑满，间接阻止换行
怎么让每行都“平均分布”而不是最后一行靠左？
justify-content: space-between 在 flex-wrap: wrap 下只对第一行生效，第二行及以后默认左对齐——这不是 bug，是规范行为。想让每行都首尾撑开+中间等距，gap 是唯一靠谱的纯 CSS 解法。
- 父容器设
display: flex; flex-wrap: wrap; gap: 12px; - 别依赖
space-between+ 伪元素模拟多行均分——只适用于子项数量固定场景 - 若必须用
space-between且只有两行，可用::after { content: ""; flex: 1; }占位，但维护成本高 -
gap不会自动给容器四边加留白，边缘紧贴是正常现象；如需外边距，额外加padding
flex-basis 怎么设才让换行按预期发生？
换行不是靠“猜空间”，而是靠子项有可衡量、可收缩的基准尺寸。只写 flex: 1 等于放弃控制权。
- 避免
flex: 1、flex: 1 1 auto：它们会让子项抢满整行，换行逻辑失效 - 推荐
flex: 0 1 200px：不放大、可缩小、基准宽设合理最小值（如按钮常用 120px） - 响应式场景用
flex: 0 1 calc(33.333% - 12px)配合gap: 12px，避免 margin 导致错位 - 慎用
flex-basis: 100%：它会让每个按钮独占一行，不是“自动换行”，是“强制单列”
真正难的不是让按钮换行，而是让它们在不同屏幕下始终维持视觉节奏：既不挤成一坨，也不散得满屏都是空隙。关键是把 flex-basis 设为有物理意义的值（比如按钮最小可读宽度），再配合 gap 控制呼吸感，其余交给浏览器弹性计算——别试图用 justify-content 去“指挥”每一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
