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><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</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;">h1</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></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><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><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: #ff0000;">id</span><span style="color: #0000ff;">="page"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><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><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: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-left"</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;">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: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-right"</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;">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><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><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>

　　假設頭部和頁腳的寬度為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的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

　　

 

 

完。

 

 

感谢大家的阅读。