为什么margin-top: auto仅在body设置flex时对子元素生效？

常规流布局下margin-top: auto无效的原因 #

在body未开启flex布局的默认块级常规流中，上下方向的margin设为auto时，浏览器会直接将其计算为0，只有左右方向的auto值才会分配水平剩余空间、实现水平居中效果。所以你给.footer设置的margin-top: auto在默认布局下相当于没有生效，自然不会把元素推到容器底部。

开启display: flex后生效的原因 #

当你给body添加display: flex属性后，body就成为了flex容器，flex布局中margin: auto的规则和常规流完全不同：四个方向的auto值都会自动分配对应方向上容器的剩余空闲空间。
你的body设置了min-height: 100vh，保证了容器高度至少等于视口高度，.footer的高度由内容和padding撑开后，垂直方向还有大量剩余空间，此时margin-top: auto就会把所有垂直剩余空间都填充到footer的上方，自然就把footer推到了body的底部。

补充优化建议：如果后续你要在body内添加其他子元素，建议额外给body加上flex-direction: column属性，把flex主轴改为垂直方向，避免子元素默认水平排列，布局逻辑会更直观。

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