利用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 class=”content”><h1>水平垂直居中对齐</h1></div>　

　
首先，设置html和body的宽度和高度都为100%，目的是让其拥宽度和高度，否侧主轴对齐（box-pack）和侧轴对齐（box-align）无法让伸缩项目之前分布伸缩容器的额外空间。

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