我们所期望的是，页头和页脚的高度由其内部因素来决定，而内容区块的高度应该可以自动伸展并占满所有的可用空间。我们只要给 <main> 这个容器的 flex 属性指定一个大于 0 的值（比如 1），就可以实现这个效果了。

这个 flex 属性实际上是 flex-grow、flex-shrink 和 flex-basis 的简写语法。任何元素只要设置了一个大于 0 的 flex 值，就将获得可伸缩的特性。flex 的值负责控制多个可伸缩元素之间的尺寸分配比例。

比如我们让 footer 也自动分配高度，为 main 高度的一半。