通过设置flex-basis统一按钮基础宽度，并结合flex-grow:1使按钮等比扩展，再配合text-align:center和统一padding，可实现按钮尺寸与文字对齐的一致性。
在使用 CSS Flex 布局时，按钮大小不一致是常见问题，尤其当按钮文字长度不同或样式来源不统一时。为让按钮尺寸整齐划一，可以结合 flex-basis 和 flex-grow 来控制它们的初始尺寸和扩展行为。
设置 flex-basis 统一基础宽度
flex-basis 决定子元素在分配多余空间前的初始大小。通过给所有按钮设置相同的 flex-basis，可以让它们从同一个基准开始布局。
例如：- 将每个按钮的 flex-basis 设为
100px或20%（在一行多个按钮时） - 这样即使内容长短不同，按钮也会先占据相同的基础空间
使用 flex-grow 实现等比扩展
如果希望按钮填满容器且宽度相等，可设置 flex-grow: 1。这会让所有按钮平分父容器的可用空间。
关键点：- 将 flex-grow 设为
1，flex-shrink 设为1，flex-basis 设为0或具体值 - 推荐写法：
flex: 1 1 0或flex: 1（简写默认值包含0px的 basis） - 此时所有按钮会等宽，不受内容影响
配合 text-align 和 padding 控制内部对齐
即使按钮尺寸统一，文字位置也可能不协调。建议：
立即学习“前端免费学习笔记（深入）”；
- 设置
text-align: center让文字居中 - 统一
padding值，避免因内边距不同导致视觉差异 - 使用
box-sizing: border-box确保尺寸计算一致
基本上就这些。通过合理设置 flex-basis 和 flex-grow，再辅以一致的内边距和对齐方式，就能轻松解决 flex 布局中按钮大小不一的问题。不复杂但容易忽略细节。
