应使用 display: inline-flex 而非 display: flex，因为前者使容器保持行内特性、不独占一行、仅占内容宽度，可与文字等自然并排；后者为块级，强制换行且默认撑满父宽，破坏行内流布局。
为什么用 display: inline-flex 而不是 display: flex
因为 display: flex 会让容器变成块级元素，独占一行——哪怕按钮只写“确定”两个字，也会横跨父容器全宽，破坏文字流排版；而 display: inline-flex 让容器本身保持行内特性，只占内容所需宽度，能和旁边的文字、span 等自然并排。
inline-flex 容器必须配哪些样式才可靠
光写 display: inline-flex 不够，浏览器 UA 样式可能偷偷加 min-width: auto 或其他干扰项。关键组合如下：
- 显式声明
flex-direction: row（虽是默认值，但避免某些旧引擎解析歧义） - 加
align-items: center垂直居中子元素，防止因字体行高差异导致按钮上下错位 - 清掉按钮自身的
width、min-width、max-width，否则会锁死自适应逻辑 - 确保父容器没设
overflow: hidden或transform，否则子项定位可能被意外截断（不报错，但布局失效）
常见错误：按钮文字换行或宽度异常
这通常不是 inline-flex 的问题，而是以下原因：
- 按钮里塞了
div或其他块级子元素——inline-flex容器内部虽是 Flex 布局，但子元素仍需符合语义；应改用span或直接文本 - 用了
white-space: normal（默认），长文字在窄空间里自动折行；需要单行显示时加white-space: nowrap - 父容器设置了
font-size: 0之类 hack 来消间隙，却忘了重置按钮内部的字体大小
兼容性与边界注意点
display: inline-flex 在 IE11+ 和所有现代浏览器原生支持，无需前缀。但要注意：
- 它不继承父级的
vertical-align，需显式设置（如vertical-align: middle）才能和文字对齐 - 它和
inline-block都能实现“可设宽高的行内行为”，但inline-flex内部天然支持 Flex 排列，不用再套一层 wrapper - 如果按钮需要响应式缩放（比如移动端缩小文字），别只依赖
em或rem，要同步检查padding是否随字体缩放失衡
min-width，哪怕只是浏览器默认样式残留——这点比写对 display 值还关键。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
