Flexbox中无文本内容的DIV下方出现未知空白问题求助

这个布局问题的核心是inline-flex元素的默认垂直对齐规则导致的：

• 类名为rowa的元素设置了display: inline-flex，这类元素属于行内级盒模型，默认的垂直对齐属性是vertical-align: baseline（基线对齐）。
• 当rowa内部没有文本内容时，它的基线会被浏览器计算为自身的底部边缘；而右侧布局中有文本的rowa，基线是内部文本的基线位置。
• 即便父级.box是flex容器，内部的rowa作为inline-flex元素，自身的垂直对齐规则依然会生效。这种基线位置的差异，会让无文本的rowa被向下推挤，从而在下方出现额外空白。
• 当给左侧第一行的DIV添加文本后，rowa的基线与右侧有文本的rowa统一为文本基线，对齐方式一致，空白自然就消失了。

快速解决方法 #

给.rowa设置统一的垂直对齐方式，比如：

.rowa {
  vertical-align: top; /* 或者 middle、bottom，按需选择 */
}

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