移动端行内弹性容器多行对齐时为何底部参差不齐
当行内弹性容器包含多行内容时，默认对齐方式可能导致底部边缘不齐整，使用 baseline-source 属性可指定使用首基线或末基线。
检查行内弹性容器的默认对齐行为
在移动端开发中，行内弹性容器常用于将多个元素横向排列。当容器内的内容换行形成多行时，浏览器需要决定以哪条基线作为对齐基准。默认情况下，浏览器会根据元素类型自动选择对齐方式，这可能导致不同行的底部高度不一致。例如，包含不同高度文本的行内弹性容器，其最后一行可能比其他行高出或低出几个像素。
要确认是否为默认行为导致的问题，可以在浏览器开发者工具中检查元素的计算样式。查看 vertical-align 属性的值，如果显示为 auto，则说明当前使用了浏览器的默认对齐逻辑。对于行内弹性容器，默认通常是对齐到首基线，这会导致多行内容在视觉上高低不平。这种不一致性在移动端窄屏设备上尤为明显，影响阅读体验和视觉整洁度。
使用 baseline-source 属性指定对齐基准
baseline-source 属性允许开发者明确指定在多行行内弹性容器中使用哪条基线进行对齐。该属性有三个可选值：first、last 和 auto。first 值强制使用首基线对齐，即所有行的基线位置相同；last 值强制使用末基线对齐，即所有行的底部位置相同；auto 值则让浏览器根据元素类型自动决定，这是默认值。
在代码中应用该属性非常简单。只需在行内弹性容器的 CSS 类中添加 baseline-source: last; 即可强制所有行底部对齐。例如，对于包含多行文本的行内弹性容器，设置该属性后，无论各行文本高度如何，其底部边缘都会保持水平。这解决了默认行为下底部参差不齐的问题，使布局更加整齐。
验证对齐效果与浏览器兼容性
设置 baseline-source 属性后，可以通过视觉检查或开发者工具验证对齐效果。在移动端模拟器或真机上查看元素，确认所有行的底部边缘是否在同一水平线上。如果使用的是 auto 值，则应观察浏览器是否按照默认逻辑对齐。如果使用 first 或 last 值，则应看到明显的对齐变化。
需要注意的是，baseline-source 属性目前并非所有浏览器都支持。根据 MDN 文档，该特性尚未达到 Baseline 标准，因为并非所有最广泛使用的浏览器都支持它。在编写代码时，应考虑浏览器兼容性。如果目标浏览器不支持该属性，则可能需要使用其他布局方式（如块级弹性容器）来达到类似的对齐效果。
排查其他可能导致对齐异常的因素
如果设置了 baseline-source 属性后对齐效果仍未改善，应检查其他可能影响布局的因素。首先，确认行内弹性容器的 display 属性是否正确设置为 inline-flex。其次，检查容器内的元素是否有额外的内边距或边框，这些可能会影响基线的计算。此外，确保文本内容确实形成了多行，因为单行内容不会触发多行对齐逻辑。
另一个需要排查的因素是父元素的字体设置。不同字体或字体大小可能会导致基线位置发生变化。如果问题依然存在，可以尝试移除 baseline-source 属性，观察默认行为是否恢复正常。通过逐步排除这些因素，可以准确定位导致对齐异常的根本原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。