Flex 多行布局中内容未填满容器高度如何排查？检查 align-content 属性
Flex 容器设置了多行布局但内容未填满高度时，应检查 align-content 属性是否生效。
确认容器是否为多行布局
align-content 属性仅在多行 Flex 容器中生效。如果父容器设置了 flex-wrap: nowrap，容器只有一行，此时 align-content 不会起作用。在移动端开发中，确保父元素设置了 flex-wrap: wrap 是应用该属性的前提。可以使用浏览器开发者工具检查元素的 computed style，确认 flex-wrap 属性的值是否为 wrap。
Flex 容器分为单行和多行两种模式。当内容超出容器宽度或高度时，flex-wrap 属性决定了是否换行。如果未设置 flex-wrap 或设置为 nowrap，所有子元素会挤在一行，此时 align-content 属性无效。确认容器的 flex-wrap 属性设置是否符合预期，避免因容器类型导致对齐失效。
检查 align-content 属性值是否正确
align-content 属性用于控制 Flex 容器中多行内容的对齐方式。要实现内容填满容器高度，应将 align-content 设置为 stretch。如果设置了 center、start 或 end，内容将不会拉伸填满容器。确保在 CSS 中明确指定了 stretch 值，以使多行内容在交叉轴方向上填满整个容器。
align-content 属性的值包括 normal、start、center、end、flex-start、flex-end、space-between、space-around、space-evenly 和 stretch。stretch 会自动拉伸项目的高度以填满容器，前提是项目没有设置固定高度。检查代码中是否误用了简写属性或继承值，导致实际应用的不是 stretch。
排查子元素高度与容器高度的关系
如果子元素的高度总和小于容器的高度，且 align-content 设置为 stretch，子元素会自动拉伸以填满容器。这是正常行为。如果希望子元素保持原有高度，应使用 center 或 start 等值。在移动端布局中，有时为了保持内容比例，会设置固定高度。此时应使用 flex-end 来对齐底部，而不是依赖 stretch。
检查子元素是否设置了固定高度或最小高度。如果子元素高度固定，stretch 属性无法生效。在移动端布局中，有时为了保持内容比例，会设置固定高度。此时应使用 flex-end 来对齐底部，而不是依赖 stretch。确认子元素的高度设置是否阻碍了对齐效果。
验证对齐效果与浏览器兼容性
在移动端浏览器中，不同版本的浏览器对 Flex 布局的支持可能存在差异。align-content 属性在主流移动浏览器中已广泛支持，但在极少数旧版本浏览器中可能需要添加前缀。检查代码中是否使用了 -webkit-align-content 等前缀，确保兼容性。
使用浏览器开发者工具的移动端模拟器或真机测试对齐效果。在模拟器中，可以切换不同的设备型号和浏览器版本。如果对齐效果不符合预期，可能是 CSS 优先级问题或样式被覆盖。检查样式表中的权重，确保 align-content 属性没有被其他样式覆盖。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。