为何display: inline-flex与display: inline的垂直对齐表现不符预期？

核心原因是inline元素和inline-flex元素的基线计算规则完全不同，而默认垂直对齐方式是基于基线的，这就导致了视觉上的错位。

• 对于display: inline的按钮：
  它的基线就是按钮内部文本的基线，默认vertical-align: baseline会让所有按钮基于各自的文本基线对齐——哪怕按钮的padding、高度有差异，只要文本基线一致，整体就看起来整齐。

• 对于display: inline-flex的按钮：
  它的基线规则由CSS规范定义：如果flex容器的主轴是水平方向，基线是容器内最后一个行内级子元素的基线；如果容器里没有行内级子元素，或者最后一个子元素不参与基线对齐，基线就变成容器的下边缘。
  这就容易出问题：比如按钮内部用flex做了垂直居中（align-items: center），那按钮内的文本基线和容器的基线就不在同一位置；或者不同按钮内的子元素高度不同，它们的基线位置也会不一样，最终导致整个按钮在垂直方向上错位。

如果想保留inline-flex的内部布局能力同时解决对齐问题，只需要给.btn加上vertical-align: middle（或者top/bottom，根据需求选择），强制统一垂直对齐方式，就能让按钮回到整齐的状态。

内容的提问来源于stack exchange，提问作者victorino