移动端 Flex 布局中元素未填满容器高度如何排查
当移动端 Flex 容器内的子元素高度不一致时，可以通过设置 flex-direction 为 column 并检查 flex 属性的默认值来让所有子元素自动填满容器高度。
检查容器方向与默认对齐规则
Flexbox 默认将子元素沿主轴排列，默认主轴方向为 row，这会导致子元素高度由内容决定而非容器高度。若希望子元素填满容器高度，需先确认 flex-direction 的值。在移动端布局中，通常需要将主轴方向设置为 column，使子元素沿垂直方向排列。此时，容器的高度将决定子元素的交叉轴尺寸。默认情况下，flex 容器不会强制子元素拉伸以填满交叉轴空间，除非显式设置对齐属性。
在 MDN 的示例中，section 元素被设为 flex 容器后，子元素 article 默认高度由内容决定。若容器高度固定，子元素高度可能参差不齐。此时需要检查 flex-direction 是否为 column，并确认是否需要调整对齐方式。默认情况下，flex 容器不会自动拉伸子元素以填满高度，除非使用 align-items 或 justify-content 等属性进行显式控制。
使用 flex 属性控制子元素比例
Flex 属性是一个简写属性，用于控制子元素在主轴上的比例分配。当 flex-direction 为 column 时，flex 属性控制子元素在垂直方向上的比例。若希望所有子元素高度一致并填满容器，可以为每个子元素设置相同的 flex 值。例如，设置 flex: 1 会让所有子元素平分剩余空间。这确保了子元素在交叉轴方向上均匀分布，从而填满容器高度。
在示例中，若为 article 元素设置 flex: 1，则所有 article 将平分容器剩余高度。若希望某个子元素占据更多空间，可设置不同的 flex 值。例如，flex: 2 会让该子元素占据两倍于其他子元素的空间。通过调整 flex 值，可以精确控制子元素的高度比例，确保布局符合设计需求。
验证布局效果与调整属性
在本地浏览器中加载 HTML 和 CSS 文件，检查 section 元素的高度是否由子元素填满。若子元素高度不一致，尝试将 flex-direction 设置为 column，并为子元素添加 flex: 1。刷新页面后，观察子元素是否均匀分布并填满容器高度。若仍不满足需求，可进一步调整 flex 值或使用 align-items 属性强制拉伸子元素。
若子元素高度仍不一致，可能是由于内容溢出或 padding/margin 导致。此时需检查子元素的 padding 和 margin 值，并确保它们不会影响布局。通过逐步调整属性并观察效果，可以找到最合适的解决方案。最终目标是让所有子元素在交叉轴方向上均匀分布，从而填满容器高度。
总结排查步骤与注意事项
排查 Flex 布局中子元素未填满容器高度的问题，需首先确认 flex-direction 的值是否为 column。然后检查 flex 属性是否正确设置，确保子元素在垂直方向上均匀分布。最后验证布局效果，并根据需求调整属性值。注意，Flexbox 是一维布局方法，仅控制主轴和交叉轴上的排列，无法直接控制二维布局。
在移动端开发中，Flexbox 布局常用于实现响应式设计。通过合理设置 flex-direction 和 flex 属性，可以轻松实现子元素填满容器高度的效果。避免过度依赖默认值，应根据实际需求显式设置属性，以确保布局的稳定性和可维护性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。