利用CSS3的flexbox实现水平垂直居中与三列等高布局

#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}

上面代码中，使用了box-ordinal-group属性，这个属性是用于修改伸缩项目在伸缩容器中的显示顺序，默认值为1，也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

至此，这个页面就已经做好了。但是出现了一个问题，就是页脚区域不会黏附在浏览器窗口可视区域底部，这让用户体验非常糟糕。

使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器，并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性（也就是#page元素）。也就是说，页脚区域前的div会变成一个伸缩项目，会根据伸缩容器的高度自适应填充伸缩容器的额外空间，也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

如果希望整个页面的布局要和浏览器窗口可视区域一样高，

首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置，body本身就没有高度，当然伸缩项目的伸缩性也就无法体现。

复制代码

html, body {
height: 100%;
}

复制代码

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}

最后，设置页脚区域前的div（#page元素）中的box-flex属性，让其根据伸缩容器（这里是指body）的高度自适应伸缩容器body的额外空间，也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

复制代码

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}

上面代码中，#page元素本身是一个伸缩容器，现在变成伸缩项目。在伸缩布局盒模型中，伸缩项目在侧轴的对齐方式box-align（旧版本）默认值为stretch，（css中可不写box-align属性）致使#page元素的三个伸缩项目都会自动拉伸，不管内容高度有多少都具有伸缩容器#page的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

总结
以上就是这篇文章的全部内容，文章总结的还是很详细的，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!