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

第一个css属性就没有看懂。于是乎，开始各种找资料，各种看书。然后把对于css3伸缩布局盒（flexbox）模型的理解写成文章，目的是对flexbox做一个简单的介绍。

1.关于css3中flexbox需要掌握的知识

因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分重要。

a：伸缩容器：是指通过display属性显示地给一个元素设置为flex或者inline-box（标准版本），这个容器就是一个伸缩容器。

b：伸缩项目：一个伸缩项目是伸缩容器的子元素。一个伸缩容器的内容具有零个以上的伸缩项目--伸缩容器的每个子元素都会成为一个伸缩项目（包括文字，称为匿名伸缩项目）。

c：伸缩流方向：是指伸缩容器中的主轴方向，可以理解成x轴的方向。伸缩流方向主要通过flex-direction属性（标准标准版本）来设置，默认值为row。

d：伸缩行换行：伸缩项目在伸缩容器中有时候会溢出伸缩容器。在伸缩容器属性中，主要通过flex-wrap属性来设置伸缩容器是否换行，默认值为nowrap。

e：伸缩性：定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。

2.flexbox实现水平垂直居中对齐

复制代码

html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}

复制代码

<div><h1>水平垂直居中对齐</h1></div>　

然后，让body成为伸缩容器，设置display属性为box，设置box-pack和box-align来控制主轴对齐和侧轴对齐，让其属性值都为center。

最后，.content元素成为伸缩容器，这样其内部文字块会成为匿名伸缩项目。此时的.content元素即为伸缩容器，又为伸缩项目。当作为伸缩容器的时候，h1元素为其伸缩项目；当作为伸缩项目的时候，body为其伸缩容器。同样为.content设置box-align和box-pack，来控制侧轴对齐和主轴对齐方式 。

效果图如下，.cotent元素和h1都实现了水平垂直居中对齐。

3.三列等高自适应，页脚区域黏附底部的布局

对于三列布局的方法有非常多种，可以通过对float+百分比宽度来实现，也可以用inline-block配合百分比实现，但是很难实现页脚黏附浏览器可视窗口底部的布局。这里只对css3三列等高布局做介绍。

做任何的布局效果，都离不开HTML结构。

复制代码

<div>
<h1>头部</h1>
</div>
<div>
<div>
<h1>主内容</h1>
</div>
<div>
<h1>左边栏</h1>
</div>
<div>
<h1>右边栏</h1>
</div>
</div>
<div>
<p>页脚</p>
</div>

假设头部和页脚的宽度为100%，左右两栏宽度为200px，而主内容自适应宽度。

复制代码

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}

这里为body设置box-sizing是为了让盒模型的宽度=内容宽度+border+padding，避免在设置padding值时需要计算width的宽度。

接下来，使用伸缩布局盒模型box（旧版本，仍然可以使用），让#page元素成为伸缩容器，设置box-flex让其子元素拥有伸缩性，自适应伸缩容器的剩余空间。

复制代码

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}

上面代码中，使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width，这里的#main元素的box-flex属性会失效，原因在于父容器没有宽度，自然无法填充伸缩容器的额外空间，（这里的额外空间指的是#page元素所占的面积，而不单单指宽度）。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器（Chrome，Safari）和Gecko内核（Firefox）不支持box-flex属性和box属性，所以必须添加厂商前缀。

上面实例中，需要修改一下主内容和左边栏，右边栏的排列方式，使用box-ordinal-group属性。

复制代码

（编辑：焦作站长网）

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