flex: 1 是实现按钮等宽填满容器的首选方案，通过均分主轴剩余空间确保宽度一致，需配合 display: flex、box-sizing: border-box、min-width: 0 及 gap 使用。
flex: 1 是最直接的等宽方案
想让一行里多个 button 真正等宽填满容器，flex: 1 是首选。它让每个按钮按比例瓜分主轴剩余空间，不受内容长短影响——哪怕某个按钮文字多一倍，宽度也不会变。
常见错误是只设 width: 20%（5个按钮）却不处理盒模型：padding、border、margin 都会撑出容器边界，导致换行或溢出。
- 父容器必须设
display: flex - 每个按钮加
flex: 1，同时建议加min-width: 0防止长文本强制撑宽 - 若需间隙，用
gap而非margin，避免干扰 flex 计算 - 务必设
box-sizing: border-box，让 padding/border 包含在宽度内
justify-content: space-between 不等于等宽
很多人误以为 justify-content: space-between 能让按钮等宽，其实它只是把首尾按钮钉在两端，中间空隙均分——按钮自身宽度仍由内容决定。结果常是：文字少的按钮窄，文字多的宽，视觉上完全不均匀。
典型现象：Uncaught TypeError: Cannot read property 'flex' of undefined 这类报错虽不直接相关，但反映出对 flex 属性作用域理解偏差——justify-content 只管排列，不管尺寸。
- 它适合「固定宽按钮 + 均匀留白」场景，比如导航栏图标
- 但凡要求「严格等宽」，就必须控制子项自身的
flex-basis或flex - 在
flex-wrap: wrap下，justify-content对第二行及以后基本失效
响应式下固定列数要靠 calc() + flex-wrap
如果按钮数量不确定，但希望每行固定显示 4 个（比如响应式网格），就不能依赖 flex: 1，否则小屏下会挤成一长条。此时得用 flex: 0 0 calc((100% - 3 * 8px) / 4) 这类计算式，显式声明基础宽度。
关键点在于：减去的是 gap 总和，不是单边 margin；且必须配合 flex-wrap: wrap 才能换行。
-
flex: 0 0表示不放大不缩小，只按基础宽度渲染 - 假设
gap: 8px，4 列就有 3 个间隙 → 减去3 * 8px - 不用
width而用flex-basis，是为了兼容 flex 的伸缩逻辑 - 移动端可配合
min-width: 120px触发自动换行，比媒体查询更轻量
最后一行对不齐？试试 ::after 伪元素
当按钮总数不能被每行列数整除时（如 15 个按钮、每行 4 个），最后一行只剩 3 个，justify-content: space-between 会让它们撑开，看起来像右边缺了一块。这不是 bug，而是 flex 的正常行为。
解决方法是用 .container::after { content: ""; flex: auto; } 在末尾插入一个不可见占位符，吸收多余空间，让真实按钮左对齐。
- 这个技巧只在
justify-content: space-between或space-around下有效 - 若已用
flex: 1实现等宽，则无需此操作——最后一行天然左对齐 - 注意伪元素会参与 flex 排列，所以必须设
content: ""，否则可能渲染空白字符
实际布局中真正麻烦的从来不是写几行 CSS，而是判断「这里到底需不需要等宽」「间隙该用 gap 还是 margin」「换行后要不要干预对齐」——这些决策比语法本身更消耗注意力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
