CSS3之flexbox如何实现水平垂直居中和三列等高布局

 

 

 

最近这些天都在弥补css以及css3的基础知识，在打开网页的时候，发现了火狐默认首页上有这样一个东西。

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

 

 

以下的内容会分为如下小节：

1.关于css3中flexbox需要掌握的概念

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

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

 

 

 

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

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

 

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

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

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

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

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

 

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

　　

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.content </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>水平垂直居中对齐<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>　　</span></span>

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

　　然后，让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结构。

    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="page"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>主内容<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-left"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>左边栏<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-right"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>右边栏<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>页脚<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span>

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

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}<span style="color: #800000;">
#header, #footer </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ccc</span>;
}<span style="color: #800000;">
#footer </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}<span style="color: #800000;">
#sidebar-left, #sidebar-right </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;
}

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

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

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;
}

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

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

<span style="color: #800000;">#sidebar-right </span>{<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;
}

　　上面代码中，使用了box-ordinal-group属性，这个属性是用于修改伸缩项目在伸缩容器中的显示顺序，默认值为1，也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

　　至此，这个页面就已经做好了。但是出现了一个问题，就是页脚区域不会黏附在浏览器窗口可视区域底部，这让用户体验非常糟糕。

　　使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器，并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性（也就是#page元素）。也就是说，页脚区域前的div会变成一个伸缩项目，会根据伸缩容器的高度自适应填充伸缩容器的额外空间，也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

　　如果希望整个页面的布局要和浏览器窗口可视区域一样高，

　　首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置，body本身就没有高度，当然伸缩项目的伸缩性也就无法体现。

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　其次，让body元素自身成为一个伸缩容器，并且设置伸缩流方向（box-orient）为vertical（旧版本中的属性）。

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　最后，设置页脚区域前的div（#page元素）中的box-flex属性，让其根据伸缩容器（这里是指body）的高度自适应伸缩容器body的额外空间，也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> stretch</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> stretch</span>;
}

　　上面代码中，#page元素本身是一个伸缩容器，现在变成伸缩项目。在伸缩布局盒模型中，伸缩项目在侧轴的对齐方式box-align（旧版本）默认值为stretch，（css中可不写box-align属性）致使#page元素的三个伸缩项目都会自动拉伸，不管内容高度有多少都具有伸缩容器#page的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

　　

 

 

完。

 

 

感谢大家的阅读。