Page 224 - css揭秘
P. 224
更灵活的解决方案
Flexbox 对于此类问题同样是完美的选择。只需寥寥几行 CSS 代码就可
以完美达成十分灵活的布局效果，而且完全不需要复杂的计算或是添加多余
的 HTML 元素等。首先，我们需要对 <body> 元素设置 display: flex，因
为它是这三个主要区块的父元素，当父元素获得这个属性之后，就可以对其
子元素触发“伸缩盒布局模型”。我们还需要把 flex-flow 设置为 column，
否则子元素会被水平排放在一行上（参见图 7-26）：
body {
display: flex;
flex-flow: column;
}
此时，页面看起来与没有启用 Flexbox 的情况似乎是一样的，因为所有
元素都占据了整个视口的宽度，而它们的高度也都是由其自身的内容来决定
的。也就是说，我们还没有真正发挥 Flexbox 的威力。 图 7-26
只应用 flex 而没有应用其他属
为了完全释放它的魔力，我们首先要把 <body> 的 min-height 属性指 性时，会让所有子元素水平排列
定为 100vh，这样它就至少会占据整个视口的高度。不过，现在整个页面的
布局仍然跟图 7-24 无异，原因在于，虽然我们已经为整个 body 元素指定了
最小高度，但各个子元素的高度仍然是以各自的内容为准的（按照 CSS 规
范的说法，它们的高度仍然由内部因素来决定）。
此时我们所期望的是，页头和页脚的高度由其内部因素来决定，而内容 小提示
区块的高度应该可以自动伸展并占满所有的可用空间。我们只要给 <main> 这个 flex 属性实际上 是
这个容器的 flex 属性指定一个大于 0 的值（比如 1 即可），就可以实现这个 flex-grow、flex-shrink 和
效果了： flex-basis 的简写语法。任何
元素只要设置了一个大于 0 的
flex 值，就将获得可伸缩的特
body {
display: flex; 性；flex 的值负责控制多个可伸
flex-flow: column; 缩元素之间的尺寸分配比例。举
min-height: 100vh; 例来说，在我们眼前的这个例子
} 中，如果 <main> 是 flex: 2 而
main { flex: 1; } <footer> 是 flex: 1，那么内容
区块的高度将是页脚高度的两倍。
如果把它们的值从 2 和 1 改为 4
这样就可以了！我们只需要四行简单的代码，就完美实现了紧贴底部的
和 2，结果也是一样的，因为真
页脚（与图 7-25 中的效果一致）。Flexbox 是不是相当霸气？ 正起作用的是它们的数值比例。
试一试 play.csssecrets.io/sticky-footer
向 Philip Walton（http://philipwalton.com）脱帽致敬，感谢他提出这
个技巧（http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer）。
致 敬
41 紧贴底部的页脚 193
ࠡ JOEC
