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;  初学者可以分开设置两个属性,更清楚一些。

你可能感兴趣的:(前端)