CSS3 弹性布局 使用Flexbox（一）垂直居中文本、偏移、反序的实现

Flexbox有四个关键特性：方向、对齐、次序和弹性。

下面利用几个简单的示例，只涉及几个元素盒子以及他们周围的内容。以方便我们理解Flexbox。

一、完美 垂直居中文本

代码如下：

<div class="Header">
				hello world!(垂直居中)
</div>

垂直居中文本的CSS规则如下：

<style>
.Header{
	width: 400px;
	height: 130px;
	background-color: #038c5a;
	color: #ebebeb;
	font-family: 'Oswald',sans-serif;
	font-size: 2rem;
	text-transform: uppercase;
	/*文字垂直居中*/
	display: flex;
	align-items: center;
	justify-content: center;
}

</style>

下面三个属性实现了文字垂直居中：

 

 其中：