epub_26211795_431.jpg
body{
display:flex;
flex-flow:column;
}
此时，页面看起来与没有启用Flexbox的情况似乎是一样的，因为所有元素都占据了整个视口的宽度，而它们的高度也都是由其自身的内容来决定的。也就是说，我们还没有真正发挥Flexbox的威力。
为了完全释放它的魔力，我们首先要把<body>的min-height属性指定为100vh，这样它就至少会占据整个视口的高度。不过，现在整个页面的布局仍然跟图7-24无异，原因在于，虽然我们已经为整个body元素指定了最小高度，但各个子元素的高度仍然是以各自的内容为准的（按照CSS规范的说法，它们的高度仍然由内部因素来决定）。
此时我们所期望的是，页头和页脚的高度由其内部因素来决定，而内容区块的高度应该可以自动伸展并占满所有的可用空间。我们只要给<main>这个容器的flex属性指定一个大于0的值（比如1即可），就可以实现这个效果了：
body{
display:flex;
flex-flow:column;
min-height:100vh;
}
main{flex:1; }
epub_26211795_430.jpg
小提示
这个flex属性实际上是flex-grow、flex-shrink和flex-basis的简写语法。任何元素只要设置了一个大于0的flex值，就将获得可伸缩的特性；flex的值负责控制多个可伸缩元素之间的尺寸分配比例。举例来说，在我们眼前的这个例子中，如果<main>是flex: 2而<footer>是flex: 1，那么内容区块的高度将是页脚高度的两倍。如果把它们的值从2和1改为4和2，结果也是一样的，因为真正起作用的是它们的数值比例。
