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

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

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

一、完美 垂直居中文本

代码如下：

hello world!(垂直居中)

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

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

其中：

display: flex;这是Flexbox的根本所在。就是把当前元素设置为一个Flexbox(而不是block或inline-block之类)。

align-items: center;   这是要在Flexbox中沿交叉轴对齐项目。上面是要实现垂直居中文本。

justify-content: center;   这里设置内容沿主轴居中。类似于，word软件中用于左、中、右对齐文本的按钮。

二、偏移

标记如下：

CSS如下：

在包含元素div上设置display: flex;后，其子元素就会变成弹性项(flex-item),从而在弹性布局模型下布局。

最后，margin-left: auto;他让最后一项用上该侧所有可用的外边距。

三、反序

只需将第二部分中的css稍加改动。

给包含元素即div的css加一行：flex-direction: row-reverse;

把最后一项 .lastItem的margin-left: auto;改为margin-right: auto;

1、垂直排列：(使所有项垂直堆叠排列)：在包含元素中使用flex-direction:column; 在把自动外边距属性删掉：

2、垂直反序：

只需要改成：flex-direction:column-reverse;

此外：flex-flow属性，是flex-direction和flex-wrap的合体。比如：flex-flow:row wrap;  初学者可以分开设置两个属性，更清楚一些。