Flexbox布局中字体小于兄弟元素时Div下移的原因解析

嘿，这个现象的核心是inline-block元素的默认垂直对齐规则，和flex容器的对齐逻辑共同作用的结果，咱们一步步拆解：

1. inline-block的默认垂直对齐：基线对齐 #

在CSS的Inline Formatting Context（IFC）中，所有inline/inline-block元素的默认垂直对齐方式是 vertical-align: baseline。这里的「基线」指的是元素内部最后一行文本的基线位置。

当两个inline-block元素处于同一行流时，浏览器会强制它们的基线对齐：

• 字体越大的元素，其基线到元素顶部的距离越大（因为字体的x-height、ascender高度等比例更大）
• 字体较小的元素为了对齐大字体的基线，会被浏览器向下偏移——这就是你看到a2整体下移的直接原因。

2. flex容器中inline-block子元素的特殊情况 #

你提到用了flexbox布局，但为什么inline-block的对齐规则还在生效？这里要注意两个关键点：

（1）flex item的「块化」特性 #

flex容器的子元素（flex items）会被自动「块化」：也就是说，你给子元素设置的display: inline-block会被浏览器忽略，计算为display: block。但如果你的flex容器设置的是display: inline-flex（而非flex），容器本身会作为inline元素参与外部流，内部的flex items仍会受外部IFC的基线对齐影响。

（2）flex的默认对齐逻辑 #

flex容器的默认align-items值是stretch，这会让所有flex items的高度拉伸至与容器高度一致（也就是最高的那个item的高度）。但如果你的flex容器的align-items被显式或隐式设置为baseline（比如继承了父元素的样式，或者你误设置了），那么flex items会以各自内部文本的基线对齐——这就会直接触发你看到的偏移现象：font-size小的item会向下偏移，以对齐大字体item的基线。

总结 #

你看到的a2向下偏移，本质是inline-block的基线对齐规则在起作用——即使在flex容器中，如果flex的对齐逻辑没有完全覆盖inline流的对齐规则（比如用了inline-flex或align-items: baseline），就会出现这种不符合预期的偏移。而你预期的“对齐且高度一致”，需要显式修改vertical-align（比如设为top）或者调整flex的align-items值（比如保持默认的stretch，并确保flex容器是display: flex而非inline-flex）。

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