移动端 Flex 容器设置 display: flex 后为何子元素自动填满高度
在移动端网页开发中，当父容器设置了 display: flex 后，子元素会自动填满容器高度，这是由于 Flexbox 默认的布局机制决定的。
确认父容器已转换为 Flex 容器
要实现子元素自动填满高度，首先需要确保父容器被正确转换为 Flex 容器。在 MDN 的示例中，通过在 section 元素上设置 display: flex，该元素就变成了 flex 容器，其子元素 article 自动变为 flex items。这是实现自动填满高度的前提条件，如果未设置该属性，子元素将不会继承容器的布局特性。
检查代码时，应确认 CSS 规则中是否包含 section { display: flex; }。如果使用了简写属性 flex-flow，例如 flex-flow: row wrap，同样也能达到让 section 成为 flex 容器的效果。确保父元素具有 display: flex 的值是排查此类问题的第一步，否则后续的自动填满高度效果不会出现。
理解 Flexbox 默认的自动填满机制
Flexbox 的默认行为会自动解决子元素高度不一致的问题。在 MDN 的示例中，仅仅添加了 section { display: flex; } 这一行代码，就得到了一个多列布局，且所有列的高度都相同。这是因为 flex items 的默认值被设置用来解决这类常见问题，即子元素会自动拉伸以填满容器在交叉轴上的空间。
这种自动填满高度的效果是 Flexbox 的核心特性之一。它使得所有子元素在交叉轴方向上占据相同的空间，无论它们的内容量如何。这种默认机制简化了布局代码，开发者无需手动设置 align-items: stretch 或其他属性即可获得整齐的列高效果。
验证 flex-direction 对布局方向的影响
Flexbox 的布局方向由 flex-direction 属性决定，这会影响主轴和交叉轴的定义，从而影响填满高度的效果。默认情况下 flex-direction 为 row，子元素沿水平方向排列，此时交叉轴是垂直方向，因此子元素会自动填满父容器的高度。如果将 flex-direction 设置为 column，子元素变为垂直排列，此时高度由内容决定，不再自动填满。
在 MDN 的示例中，当 flex-direction 被设置为 column 时，布局会恢复为垂直排列。因此，在验证自动填满高度时，需要确认 flex-direction 的设置是否符合预期。如果希望保持水平排列并填满高度，应保持默认的 row 值，或者显式设置 flex-direction: row。
使用浏览器开发者工具检查计算样式
在移动端浏览器中，可以使用开发者工具检查元素的计算样式和布局框，以验证自动填满高度是否生效。选中父容器和子元素，查看计算后的样式，确认 display 属性是否为 flex，以及 flex-direction 的值。同时，检查子元素的交叉轴尺寸是否被拉伸至与父容器一致。
如果子元素未填满高度，可以尝试在 CSS 中添加 flex: 1 给子元素，并确保父容器的高度是明确的。通过调整这些属性，可以验证布局是否符合预期。开发者工具可以帮助快速定位问题所在，例如检查是否有其他 CSS 规则覆盖了默认的 Flexbox 行为。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。